Generate an array of markers in one loop and assign different popup to all of them

Question

I load an array of markers from a JSON string. The JSON string contains marker location and information that needs to be displayed on each marker's popup.

I have the following code

function AddAllMarkers(markersJSON){
        var tempArray = JSON.parse(markersJSON);

        infoWindow = new google.maps.InfoWindow(); 

        for(var i = 0; i < tempArray.Locations.length; i++){
            var obj = tempArray.Locations[i];
            var point = new google.maps.LatLng(obj.Latitude, obj.Longitude);

            var contentString = <!--CONTENT STRING GETS SET HERE PER MARKER-->;

            var markerTemp = new google.maps.Marker({
                position: point,
                icon:obj.Icon
            });

            google.maps.event.addListener(markerTemp, 'click', function() {
                infoWindow.close();
                infoWindow = new google.maps.InfoWindow();
                infoWindow.setContent(contentString);
                infoWindow.open(map, this);
            });

            markerArray.push(markerTemp);
        }
    }

When this function gets called I load all the markers correctly but all markers show the popup of the last marker loaded. What am I doing wrong? I did try moving the declaration of infoWindow around but either that does not solve the problem or it causes multiple balloons to be opened at the same time.

How can I solve this?

similar to [Google Maps JS API v3 - Simple Multiple Marker Example](http://stackoverflow.com/questions/3059044/google-maps-js-api-v3-simple-multiple-marker-example) (uses function closure rather than attributes to solve the issue) — geocodezip, Aug 24 '14 at 14:20

score 1 · Accepted Answer · answered Aug 24 '14 at 12:11

The reason for the observed behavior is that at the time the event listener function is executed - that is at the time of a mouse click - the loop has finished. Therefore, the contentString variable will hold the value from the last loop iteration.

As a workaround you could attach the content string to the marker itself and access it using the this reference within the event handler.

function AddAllMarkers(markersJSON){
    var tempArray = JSON.parse(markersJSON);

    infoWindow = new google.maps.InfoWindow(); 

    for(var i = 0; i < tempArray.Locations.length; i++){
        var obj = tempArray.Locations[i];
        var point = new google.maps.LatLng(obj.Latitude, obj.Longitude);

        var contentString = <!--CONTENT STRING GETS SET HERE PER MARKER-->

        var markerTemp = new google.maps.Marker({
            position: point,
            icon:obj.Icon
        });

        markerTemp.contentString = contentString;

        google.maps.event.addListener(markerTemp, 'click', function() {
            infoWindow.close();
            infoWindow = new google.maps.InfoWindow();
            infoWindow.setContent(this.contentString);
            infoWindow.open(map, this);
        });

        markerArray.push(markerTemp);
    }
}

Wow! Thank you! worked like a charm! Didn't know you could assign custom properties to the marker object like that. — WackStr, Aug 24 '14 at 13:13

Generate an array of markers in one loop and assign different popup to all of them

1 Answers1