Search code examples
javascriptgoogle-mapslisteners

Dynamically Adding Listeners To Google Maps Markers


I'm working on a page which fetches code with a Javascript httpObject and uses it to update two elements on the page - a google map, and a DIV that lists the things the marker points to.

That bit works fine. The problem is that when I create the markers, I do so through a for loop, and I add listeners to the marker in each loop. Then, when I test the page, I find the same thing happens for every marker.

Hovering over a marker should change the border colour of the corresponding bit of the DIV. Instead, each marker changes the border of the last bit. It seems like each time I add the listeners I overwrite the listeners of the previously added markers too.

I get that this is to do with the Google Maps API retaining the identity of a marker even when you create a new one in Javascript. What I don't get it how to get around it - I tried creating an array outside the loop, and changing

var newMarker = new GMarker(newLatLng);

with newMarker[count] = new GMarker(newLatLng);

but it still doesn't work.

Help Me, StackOverflow. You're my only hope. :)

Edit: A little more code

for (count=0;count<=LatArray.length;count++)
{
  thisLat = LatArray[count];
  thisLong = LongArray[count];
  thisHTML = HTMLArray[count];
  newLatLng = new GLatLng(thisLat, thisLong, true);

  if (mapBounds.containsLatLng(newLatLng))
  {
      //alert(count);
      var  dinnerNumber = "dinner_"+count;
      newMarkers[count] = new GMarker(newLatLng); 
      map.addOverlay(newMarkers[count]);
      GEvent.addListener(newMarkers[count],'mouseover',function(){document.getElementById(dinnerNumber).style.borderColor = '#000000';
  });
}// for

Solution

  • Closure issue -- all those listeners share the same dinnerNumber variable. Try this:

    GEvent.addListener(newMarkers[count], 'mouseover', (function(dinnerNumber){ return function(){document.getElementById(dinnerNumber).style.borderColor = '#000000';}; })(dinnerNumber));
    

    This way, each listener is created with its own closed copy of dinnerNumber.