adding click to google maps api v3

Question

I have an array of 7 marker points , I want to add a click handler to each marker. I am trying to do so like this

for (var i = 0; i <= 7; i++) {
     google.maps.event.addListener(googleMarkerPoints[i], 'click', function () {
     var selector = "div[data-num='" + i + "']";
     $(selector).css({ "background-color": "#999" });
  });
}

googleMarkerPoints is filled like this:

for (var i = 0; i < data.length; i++) {
      var obj = data[i];
      var latitude = obj.Latitude;
      var longitude = obj.Longitude;
      var title = obj.Title;
      var thisLatlng = new google.maps.LatLng(latitude, longitude);
      var thismarker = new google.maps.Marker({
            position: thisLatlng,
            map: map,
            title: title
          });
      googleMarkerPoints.push(thismarker);
}

my problem is that every time that I click any marker in the handler selector gets filled with
"div[data-num='7']"

I was hoping that data-num would be different for each marker going 1 through 7, why are these click handlers not working properly??

This is a FAQ. When the loop ends "i" is left at data.length+1. possible duplicate of Google Maps JS API v3 - Simple Multiple Marker Example — geocodezip
– geocodezip, Commented Sep 11, 2013 at 21:52

Travis J · Accepted Answer · 2013-09-11 21:54:51Z

1

You are closing over i and so you only get one value for all of the events. Try passing the i value into your anonymous function like this:

for (var i = 0; i <= 7; i++) {
 (function(i){
  google.maps.event.addListener(googleMarkerPoints[i], 'click', function () {
   var selector = "div[data-num='" + i + "']";
   $(selector).css({ "background-color": "#999" });
  });
 })(i)
}

answered Sep 11, 2013 at 21:54

Travis J

82.6k43 gold badges213 silver badges280 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

adding click to google maps api v3

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related