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: 996

Filed under:
|
|

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

Related posts about google-maps

Related posts about JavaScript