Google maps multiple markers with multiple unique info boxes

Question

A project i am currently working on requires the implementation of a google map with multiple markers with multiple info boxes. Referencing the map API this seemed like a good starting point:

https://developers.google.com/maps/documentation/javascript/examples/icon-complex

So i used this code as a base and built on from there. Now the bit i am stuck on is adding a unique infobox to each marker. here is my source

http://jsfiddle.net/jackthedev/asK5v/1/

as you can see i am trying to call the first element of which ever object in the array is selected which works perfectly for the lat, long and title just not the contentstring variable.

for (var i = 0; i < locations.length; i++) {

    var office = locations[i];
    var myLatLng = new google.maps.LatLng(office[1], office[2]); //works here
    var infowindow = new google.maps.InfoWindow({content: contentString});

    var contentString = 
        '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<h1 id="firstHeading" class="firstHeading">'+ office[0] + '</h1>'+ //doesnt work here
        '<div id="bodyContent">'+ 
        '</div>'+
        '</div>';

    var infowindow = new google.maps.InfoWindow({content: contentString});

    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        icon: globalPin,
        title: office[0], //works here
    });

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

To see what i am trying to explain just simply click on each of the markers on the demo above and you will see the an infobox popup with the title of 'China'. for some reason its grabbing the first element of the last object for every marker.

What i am trying to achieve is that all infoboxes are unique to there marker if that makes sense? So when i click on a marker in Singapore an infobox will popup with the title of Singapore using the array objects i have previously defined.

Thanks and i hope i have been clear enough

score 8 · Accepted Answer · answered Feb 14 '14 at 04:06

The problem is that the variable infoWindow is getting overwritten for each iteration of the loop. Normally this wouldn't be a problem, except that the part inside addListener is an asynchronous callback, and by the time each gets invoked, the reference to infoWindow is no longer correct.

You can get around this by creating a closure for infoWindow, so that each callback function gets its own copy. Use this:

google.maps.event.addListener(marker, 'click', getInfoCallback(map, contentString));

With the enclosed helper function:

function getInfoCallback(map, content) {
    var infowindow = new google.maps.InfoWindow({content: content});
    return function() {
            infowindow.setContent(content); 
            infowindow.open(map, this);
        };
}

See here for a forked Fiddle.

Google maps multiple markers with multiple unique info boxes

1 Answers1