Question

I’m creating a dynamic map using Google’s API. I’m trying to get the map to dynamically apply the info boxes for each marker.. and I can’t figure it out:

http://www.zephyrusdevelopment.com/clients/electrotrack/map2.html

Answer 1

It looks like you’re falling into the classic loop-plus-closure error, which in simplified form looks like this:

while(i<=(a_l-1)) {
    // snip
    var marker = new google.maps.Marker({
        // snip
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
    // snip
}

The problem is that, due to the way closures work in Javascript, the handler function will keep a persistent reference to the marker variable, even after it is assigned to a new object. End result: all your handlers reference the last object assigned to marker.

There are several ways to fix this; I usually use a separate function to assign the click handler, which captures the correct marker object in the handler scope:

function addClickHandler(marker) {
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}

while(i<=(a_l-1)) {
    var marker = new google.maps.Marker({
        // snip
    });
    addClickHandler(marker);
}