Using JSON in Google Maps - Closures?

Question

I am retrieving results from a web service. The results are returned as JSON. The JSON looks something like this:

{
  "001": {
    name: 'Grocery Store',
    latitude:30.2669456,
    longitude:-97.7427782,
    calendar: {
      month: 'November'
    }
  },

  "002": {
    name: 'Ice Cream',
    latitude:30.2669425,
    longitude:-97.7427742,
    calendar: {
      month: 'November'
    }
  }
}

After this data is retrieved, I am trying to add it to a Google Map. I have successfully initialized my map. In fact, the push pins appear in the correct location. When I hover over each push pin, the title appears correctly. However, when I click the push pin, and the info window appears, it appears in the same location for every push pin. In addition, the content of the info window is the same. I've noticed that it is always the values associated with the last key in json. For that reason, I suspect it has something to do with closures. At the same time, I'm not sure how to fix this.

What am I doing wrong? Here is my code that is looping through the results:

function dataRetrieved(json) {
  for (var place in json) {                 
    var marker = new google.maps.Marker({
      map: map,
      title: json[place].name,
      position: {
        lat: json[place].latitude,
        lng: json[place].longitude
      }
    });

    marker.info = new google.maps.InfoWindow({
      content: '<div>' + json[place].calendar.month + '</div>'
    });

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

Thank you for your help!

Yes, it is: http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example?rq=1 — Jamiec, Nov 03 '15 at 14:26

score 0 · Accepted Answer · answered Nov 03 '15 at 14:28

Yes, it is what you expect - by the time you click on any link, the variable marker used inside the event handler is the final item from the loop.

Fix it thusly

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

Using JSON in Google Maps - Closures?

1 Answers1