Issue looping through JSON results for Google Map

Question

I'm trying to load points on a Google Map, using a JSON feed. I have based this off of the code presented here: http://forums.asp.net/t/1826865.aspx?Google+Maps+populated+from+SQL

Here is how I'm adding the points:

function plotpoints() {
    clearMarkers();
    var responseText = $.ajax(
    {
        type: "POST", 
        url: "mapdata.aspx?state=California&city=Los%20Angeles", 
        data: "",
        success: function (msg) {
            if (msg != "") {
                serverResponseObj = msg;
                if ((serverResponseObj) && (serverResponseObj.points)) {
                    for (i in serverResponseObj.points) {
                        var marker = new google.maps.Marker({ 
                            name: serverResponseObj.points[i].name,     
                            position: new google.maps.LatLng(serverResponseObj.points[i].lat, serverResponseObj.points[i].long), map: map });
                        var markerContent = "<span style=\"font-weight:bold;\">" + serverResponseObj.points[i].name + "</span>";
                        markerContent += "<br/>";
                        markerContent += serverResponseObj.points[i].MDesc + " member" + ((serverResponseObj.points[i].MDesc == 1) ? "" : "s");
                        markerContent += "<br/>";
                        markerContent += "<a href=\"League.aspx?id=" + serverResponseObj.points[i].id + "\">Go to League Page</a>";
                        var infoWindow = new google.maps.InfoWindow({ content: markerContent });
                    markersArray.push(marker);
                    marker.addListener('click', function () { 
                        infoWindow.open(marker.get('map'), marker) });
                    }
                }
            }
            addPolys();
        }
    });
}

The Markers are being added correctly. However there is a problem with the InfoWindow's. All of the points open the same InfoWindow, with the same text....

Any ideas?

`marker.addListener` - review the original perhaps? `google.maps.event.addListener` — Mark Schultheiss, Nov 20 '15 at 18:22
Bottom line you are adding an event listener to the `marker` when you should be adding it to the `google.maps` - so they all get the same event handler (the last one).. — Mark Schultheiss, Nov 20 '15 at 19:05
Use function closure to associate the infowindow content with the markers per the duplicate - [proof of concept fiddle](http://jsfiddle.net/geocodezip/4xstxzez/2/) — geocodezip, Nov 20 '15 at 19:08

score 0 · Answer 1 · answered Nov 20 '15 at 18:42

I can't see what exactly is causing your problem, but the code could be cleaned up a bit, which may help the problem.

When using for...in, you may get prototype objects as well, double-check that you're working with the properties of the object itself. To do this, wrap the contents of your loop with:

if (serverResponseObj.points hasOwnProperty(i)) { 
  ...
}

Also you are redeclaring variables every time that loop runs, it is more concise and produces better performance to move declarations outside.

var marker, markerContent, infoWindow;
for (i in serverResponseObj.points) { ... }

Moving them all the way to the top of the function block will more accurately describe the way it will actually be executed and is generally recommended.

I'd make these updates and then take another look at it.
Especially the bit about hasOwnPropery(), the problem may disappear as mysteriously as it appeared after fixing that.

Issue looping through JSON results for Google Map

1 Answers1