google maps multiple markers with multiple info window

Question

i'm trying put a google maps on my page with multiple markers (>1000) and each one have their own unique info window. I'm adding the markers through an array and the markers seem to come up just fine, but all the info windows have the same exact content. I'm at a loss and would greatly appreciate your info. Here's my code:

<script>
var map;
var markersArray = [];
var infowindow =  new google.maps.InfoWindow({
    content: ''
});

function initialize() {

    bounds = new google.maps.LatLngBounds();

    usa = new google.maps.LatLng(37.09024, -95.712891);

    var myOptions = {
        zoom: 4, 
        center: usa,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.SMALL
        }
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    plotMarkers();
}

// here is where the array content is contained
var webApps = [<%=strArray%>];

function plotMarkers(){
    var i;
    for(i = 0; i < webApps.length; i++){
        codeAddresses(webApps[i]);
    }
}

function codeAddresses(address){

    // other variables
    lat = address[3];
    lng = address[4];
    desc = address[0]

    myLatlng = new google.maps.LatLng(lat,lng);

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
    });

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

}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map_canvas" style="width: 100%; height: 600px;"></div>

possible duplicate of [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) — geocodezip, Aug 02 '13 at 05:15

score 2 · Accepted Answer · answered Aug 02 '13 at 02:38

It looks like desc is a global variable. So on each iteration of the loop, you set it to something else, which means it will always be equal to the description of the last item you iterated over.

Try putting var in front of it, to make it a local variable. For example: var desc = address[0];.

When you do this, a concept called "closure" will ensure that every listener you create will reference the value of desc at the time it was created, instead of what it was last set to.

It's a best practice to avoid using global variables for a few reasons, this being one of them. You should get in the habit of prefixing your variables with var.

Info on variable scope:

http://msdn.microsoft.com/en-us/library/ie/bzt2dkta(v=vs.94).aspx

Info on closure:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Closures

+1, was writing same answer. More info on closure from SO: http://stackoverflow.com/questions/111102/how-do-javascript-closures-work/ — Mics, Aug 02 '13 at 02:39
In addition, you can consider setting `desc` as property of marker to avoid using closure. — Mics, Aug 02 '13 at 02:43
WOW!... that is crazy!!! i would have never figured that one out. Thanks guys!!!!! — Damien, Aug 02 '13 at 02:44

score 0 · Answer 2 · answered Nov 13 '13 at 02:47

I had the same problem, and ultimately found that there is an article addressing this in the documentation:

https://developers.google.com/maps/documentation/javascript/examples/event-closure

In addition to the global vs. local variable mentioned by Kai, you also need to figure out the function closure. In short, the pieces of the code where you assign the infowindow it's description and the where you add the event listener will need to be a separate function.

See the article above for more details.

google maps multiple markers with multiple info window

2 Answers2