Custom Google Map (v3) WordPress

• SOLVED

Please can someone help me write the appropriate JavaScript to create a multi-location, Google Map (v3) to embed in my WordPress site. I have re-used sample [[LINK href="http://https://google-developers.appspot.com/maps/documentation/javascript/examples/icon-complex"]]code from here[[/LINK]] as a starting point for this project.

I would like to extend the ‘Beaches’ array to support two new parameters – ICON and URL. Each map marker should render as a custom ICON and, when clicked, navigate to the appropriate URL.

Thank you.


<script>

function initialize() {
var mapOptions = { zoom: 12, center: new google.maps.LatLng(<?php address_geolocation(); ?>), mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
setMarkers(map, beaches);
}

var beaches = [
['Bondi Beach', -33.890542, 151.274856, 5, 'flag2.png', 'http://www.altavista.com'],
['Coogee Beach', -33.923036, 151.259052, 4, 'flag3.png', 'http://www.yahoo.com'],
['Cronulla Beach', -34.028249, 151.157507, 3, 'flag2.png', 'http://www.ask.com'],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2, 'flag2.png', 'http://www.bing.com'],
['Maroubra Beach', -33.950198, 151.259302, 1, 'flag1.png', 'http://www.google.com']
];

function setMarkers(map, locations) {
var image =
new google.maps.MarkerImage('http://localhost/wp-content/themes/mytheme/XXXXXXXXXX',
new google.maps.Size(20, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32)
);
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
}
}

</script>


Answers (1)

2012-12-17

Dbranes answers:

Hi, have you tried something like this:

<script>
function initialize() {
var mapOptions = { zoom: 12, center: new google.maps.LatLng(<?php address_geolocation(); ?>), mapTypeId: google.maps.MapTypeId.ROADMAP }
var map = new google.maps.Map(document.getElementById('map_canvas'),mapOptions);
setMarkers(map, beaches);
}

var beaches = [
['Bondi Beach', -33.890542, 151.274856, 5, 'flag2.png', 'http://www.altavista.com'],
['Coogee Beach', -33.923036, 151.259052, 4, 'flag3.png', 'http://www.yahoo.com'],
['Cronulla Beach', -34.028249, 151.157507, 3, 'flag2.png', 'http://www.ask.com'],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2, 'flag2.png', 'http://www.bing.com'],
['Maroubra Beach', -33.950198, 151.259302, 1, 'flag1.png', 'http://www.google.com']
];

function setMarkers(map, locations) {
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var image =
new google.maps.MarkerImage('http://localhost/wp-content/themes/mytheme/'+beach[4],
new google.maps.Size(20, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32)
);
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3],
url: beach[5]
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});
}
}
</script>

<strong>update:</strong> changed beach[5] into beach[4], for the image icons.

---

designbuildtest comments:

Hi Dbranes, that worked a treat. Thank you.

---

Dbranes comments:

ok great it worked for you ;-)