使用回调功能在Google地图上放置多个标记

Question

I want to implement a functionality on Gmap API, that if the zoom is more than 17, show all the markers(otherwise, just hide them). However, when I write code like the following, it just does not work.

PS: the code might not be exactly correct in syntax and arrangement, but it express what I mean

// @latlong is an array of tuple (latitude , longtitude)
// @myMap is the google map object passed to the function
function placeMarker( myMap , latlon)
{
  for(var i = 0 ; i < latlon.length ; i ++)
  {
     myMarker = new google.maps.Marker( {
        position: new google.maps.LatLng(latlon[i][0], latlon[i][1])
     });

     google.maps.event.addListener(myMap, 'zoom_changed', function() {
      zoomLevel = myMap.getZoom()       
      if(zoomLevel >= 17)
      {
        myMarker.setMap(myMap)
      }
      else
      {
        myMarker.setMap(null)
      }
  });


}
}

And I just change my code to:

function placeMarker( myMap , latlon)
{
  for(var i = 0 ; i < latlon.length ; i ++)
  {
     myMarker = new google.maps.Marker( {
        position: new google.maps.LatLng(latlon[i][0], latlon[i][1])
     });

     (function(myMarker_copy){
         google.maps.event.addListener(myMap, 'zoom_changed', function() {
          zoomLevel = myMap.getZoom()       
          if(zoomLevel >= 17)
          {
            myMarker_copy.setMap(myMap)
          }
          else
          {
            myMarker_copy.setMap(null)
          }
      });
      }(myMarker));


}
}

And the second version works. I know how to make it work, however, I really do not know why it work and why the other does not. Maybe this has something to do with the function closure or parameter passing principle of JS(I have checked a lot references, but some of them just hold different ideas). Could anybody give me a help?

really appreciate it.

Answer 1

The first example which doesn't work: There is one global variable myMarker and many event listeners which at the end all operate on one marker and that is the one created the last in the loop.

The second example which does work: because of closure each event listener receive its own local copy of marker variable. So, when event listener is called it has correct marker value.