Multiple markers in Googe Maps API v3 that link to different pages when clicked
Posted
by Dave
on Stack Overflow
See other posts from Stack Overflow
or by Dave
Published on 2009-10-25T20:30:49Z
Indexed on
2010/04/03
23:13 UTC
Read the original article
Hit count: 1002
I have a map with multiple markers, which I populate via an array. Each marker is clickable and should take the user to a different url per marker.
The problem is that all the markers, while displaying the correct title, all use the url of the last entry in the array.
Here is my code:
var myOptions = { zoom: 9, center: new google.maps.LatLng(40.81940575,-73.95647955), mapTypeId: google.maps.MapTypeId.TERRAIN }
var map = new google.maps.Map(document.getElementById("bigmap"), myOptions);
setMarkers(map, properties);
var properties = [
['106 Ft Washington Avenue',40.8388485,-73.9436015,'Mjg4'],
['213 Bennett Avenue',40.8574384,-73.9333426,'Mjkz'],
['50 Overlook Terrace',40.8543752,-73.9362542,'Mjky'],
['850 West 176 Street',40.8476012,-73.9417571,'OTM='],
['915 West End Avenue',40.8007478,-73.9692155,'Mjkx']];
function setMarkers(map, buildings) {
var image = new google.maps.MarkerImage('map_marker.png', new google.maps.Size(19,32), new google.maps.Point(0,0), new google.maps.Point(10,32));
var shadow = new google.maps.MarkerImage('map_marker_shadow.png', new google.maps.Size(28,32), new google.maps.Point(0,0), new google.maps.Point(10,32));
var bounds = new google.maps.LatLngBounds;
for (var i in buildings) {
var myLatLng = new google.maps.LatLng(buildings[i][1], buildings[i][2]);
bounds.extend(myLatLng);
var marker = new google.maps.Marker({ position: myLatLng, map: map, shadow: shadow, icon: image, title: buildings[i][0] });
google.maps.event.addListener(marker, 'click', function() { window.location = ('detail?b=' + buildings[i][3]); });
}
map.fitBounds(bounds);
}
Using this code, clicking any marker take the user to 'detail?b=Mjkx'
What am I doing wrong?
© Stack Overflow or respective owner