Link Multiple Markers from XML on Google Maps

Question

I was able to pull in my markers from an XML file and place them on a Google Map, but now I want each marker to link to its respective url once clicked. Can someone please let me know what I'm doing wrong? For some reason I'm only getting the last entry's url.

downLoad("phpsqlajax.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
        var city = markers[i].getAttribute("city");
        var state = markers[i].getAttribute("state");
        var country = markers[i].getAttribute("country");
        var markerUrl = markers[i].getAttribute("url");
        var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
        var marker = new google.maps.Marker({
            position: point,
            map: googleMap,
            icon: 'map-pin.png',
            url: markerUrl
        });
        google.maps.event.addListener(marker, 'click', function() {
            window.location.href = marker.url;
        });
    }
});

i dont know if i understand function closures enough to get this working correctly — user2402492, May 20 '13 at 20:59

score 0 · Accepted Answer · answered May 20 '13 at 21:09

Make a create Marker function like this (not tested):

function createMarker(point, url) {
    var marker = new google.maps.Marker({
        position: point,
        map: googleMap,
        icon: 'map-pin.png',
        url: markerUrl
    });
    google.maps.event.addListener(marker, 'click', function() {
        window.location.href = marker.url;
    });
}

Then call it like this:

downLoad("phpsqlajax.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
        var city = markers[i].getAttribute("city");
        var state = markers[i].getAttribute("state");
        var country = markers[i].getAttribute("country");
        var markerUrl = markers[i].getAttribute("url");
        var point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));
        createMarker(point, markerUrl);
    }
});

Thank You, that worked like a charm! Is there anyway you can explain to me why that worked? — user2402492, May 20 '13 at 22:02
[Mike Williams' explanation of javascript function closure from his Google Maps Javascript API v2 tutorial](http://econym.org.uk/gmap/closure.htm) — geocodezip, May 20 '13 at 22:40

Link Multiple Markers from XML on Google Maps

1 Answers1

Linked