Карты Google - не уверен, почему я всегда получаю первое информационное окно

Question

У меня есть следующий код, и каждый раз, когда я нажимаю на один из маркеров, я получаю первое информационное окно. У меня 181 информационное окно и 181 маркер. Любая помощь приветствуется.

var i=0;
$.each(in_locations,function(k,v){
  console.log(v);
  var marker_latlng = new google.maps.LatLng(v.latitude, v.longitude);


   markers[i] = new google.maps.Marker({
     position: marker_latlng,
     map: map, 
     title:"here is my title" + v.id
   });


   infowindows[i] = new google.maps.InfoWindow({
     content: "here is some content string" + v.id,
   });

  google.maps.event.addListener(markers[i], 'click', function() {
    alert('number of infowindows: ' + infowindows.length + ' and value is: ' + i);
    infowindows[i].open(map,markers[i]);
  });
  i++;
});

ТНХ

Answer 1

Предупреждает ли вас, что значение всегда 181? Вам нужно заключить объявление обработчика в замыкание, чтобы остановить его, используя внешнее значение i (которое всегда будет 181 после завершения цикла)

  (function(i){
    google.maps.event.addListener(markers[i], 'click', function() {
      alert('number of infowindows: ' + infowindows.length + ' and value is: ' + i);
      infowindows[i].open(map,markers[i]);
    });
  }(i));

Edit: поскольку вы используете функцию $ .each jQuery, которая дает каждой итерации свою собственную область (поскольку каждая итерация вызывает функцию), вы также можете обойти свою проблему, создав локальную переменную, скажем j, которая захватывает внешнее значение i.

  var j = i;
  google.maps.event.addListener(markers[i], 'click', function() {
    alert('number of infowindows: ' + infowindows.length + ' and value is: ' + j);
    infowindows[j].open(map,markers[j]);
  });

(Это работает, потому что на каждой итерации создается новый j, тогда как раньше у вас было только 1 i, потому что вы объявили его вне функции итерации.)

Answer 2

ОБНОВЛЕНО

• демо: http://jsbin.com/obunap/5

$.each(in_locations, function(i, item){
  console.log(i);
  var marker_latlng = new google.maps.LatLng(item.latitude, item.longitude);


   var markers = new google.maps.Marker({
     position: marker_latlng,
     map: map, 
     title:"here is my title" + item.id
   });


   var infowindows = new google.maps.InfoWindow({
     content: "here is some content string" + item.id,
   });

  google.maps.event.addListener(markers, 'click', function() {
    alert('number of infowindows: ' + in_locations.length + ' and value is: ' + i);
    infowindows.open(map, markers);
  });
});

• объяснение? вы уже внутри цикла $.each, поэтому вам не нужно увеличивать i++ итератор