Google Maps API - Trouble with Arrays and InfoWindows

Question

Sorry if this is trivial, but I am new to JS and have been at this problem for a few hours to no avail.

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

var markersArray = [];
var infowindowArray = [];

function addMarker(location) {
    marker = new google.maps.Marker({
    position: location,
    map: map
    });
    markersArray.push(marker);
}

function addInfowindow(string) {
    infowindow = new google.maps.InfoWindow({content: string});
    infowindowArray.push(infowindow);
}

function findvenues(latitudelongitude) {
$.get("venuefinder.php", { latlong:latitudelongitude.Ka+","+latitudelongitude.La }, function(data){
    var myObject = eval('(' + data + ')');
    for(x in myObject.response.venues){
        var latlonglocation = new google.maps.LatLng(myObject.response.venues[x].location.lat,myObject.response.venues[x].location.lng);
        addMarker(latlonglocation);
        addInfowindow(myObject.response.venues[x].name);
        google.maps.event.addListener(markersArray[x], 'click', function() {infowindowArray[x].open(map,markersArray[x]);});
        console.log(markersArray[x],infowindowArray[x]);
    }
});

When findvenues is called, the infowindow click events should be added. When I click the icons, the same infowindow of the last element in the array of infowindows always opens.

However, if I manually enter in the following code, it works:

google.maps.event.addListener(markersArray[0], 'click', function() {infowindowArray[0].open(map,markersArray[0]);});
google.maps.event.addListener(markersArray[1], 'click', function() {infowindowArray[1].open(map,markersArray[1]);});

I need this to be dynamic though... What am I doing wrong? Let me know if the question is unclear and I will try my best to clarify.

Answer 1

Change that call to "addListener" in the loop:

      google.maps.event.addListener(markersArray[x], 'click', function() {infowindowArray[x].open(map,markersArray[x]);});

to this:

      google.maps.event.addListener(markersArray[x], 'click', (function(x) {
        return function() {
          infowindowArray[x].open(map,markersArray[x]);
        }
      })(x));

By introducing another function like that, you create a whole new scope. That "freezes" the value of "x" you pass in so that the returned function (the actual handler function that'll be passed in to the Google API, in other words) has access to its very own "x", separate from all the other handlers established in that loop.

If you don't do that, then all the handlers share the exact same little "x", and that clearly won't do.

edit — there are other ways to do this. You could write that extra function as a totally separate thing:

function makeMapListener(window, map, markers) {
  return function() { window.open(map, markers); };
}

Then the statement in your loop would look like:

google.maps.event.addListener(markersArray[x], 'click', makeMapListener(inforwindowArray[x], map, markersArray[x]));

The important part of it is to make a copy of the variable(s) that change during the loop before constructing the handler function.