Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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
like image 724
Alan Jack Avatar asked Aug 02 '09 22:08

Alan Jack


People also ask

How do I change a marker icon dynamically in Google Maps?

You could just create each div , and a add a mouseover and mouseout listener that would change the icon and back for the markers.

Can you customize Google Maps API?

The Google Maps APIs now support you in creating beautiful styled maps for your Android and iOS apps as well as your website using the same JSON style object.


2 Answers

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.

like image 156
Justin Ludwig Avatar answered Oct 11 '22 10:10

Justin Ludwig


You have to read carefully

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

you missed one ();

the 3-rd parameter is (function(var){return function(){//what you want wirh var;};})(var)

like image 20
ovi Avatar answered Oct 11 '22 10:10

ovi