GMaps APIv3 InfoWindow для маркеров в цикле for() всегда одинаковый

Question

Я знаю, что тема уже обсуждалась много раз, но я не могу решить свою проблему. Я хотел бы отобразить некоторые маркеры на моей карте с событием click для каждого из них. Каждое событие click должно открыть информационное окно с некоторыми данными.

Вот что я написал; Этот код работает без каких-либо ошибок в консоли, все маркеры отображаются правильно, но отображается при щелчке InfoWindow всегда одинакова для всех ...

//Global variable 
var info = new google.maps.InfoWindow(); 

//... some other functions 

function createMarker(map) 
{ 
    for(i = 0 ; i < loadedMarkers.length ; i++) { 
     (function(i) { 
      value = loadedMarkers[i]; 
      var pos = new google.maps.LatLng(value.Latitude, value.Longitude); 

      var mapOptions = { 
       zoom: 10, 
       center: pos, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      } 

      var marker = new google.maps.Marker({ 
       position: pos, 
       map: map, 
       title: value.Title 
      }); 

      var MarkerContent = "<div class=\"marker\">" + 
            "<h2>"+ value.Title +"</h2>" + 
            "<p>"+ value.Text +"</p>" + 
           "</div>"; 

      info.setOptions({ 
       content: MarkerContent, 
       size: new google.maps.Size(50, 50), 
       position: pos 
      }); 

      google.maps.event.addListener(marker, 'click', function() { 
       info.open(map, marker); 
      }); 
     } 
     )(i); 
    } 
} 

Я слышал о какой-то проблеме закрытия (я новый с JS), поэтому я попытался поместить логику в функцию (function (i) ...), но она всегда отображает один и тот же контент для всех infowindow.

Может кто-нибудь объяснить мне, где я неправильно (и почему?)

Спасибо вам большое

Answer 1

Вам необходимо обновить содержимое в InfoWindow, когда он открыт (в противном случае он отображает последнее содержимое):

google.maps.event.addListener(marker, 'click', function() { 
     info.setOptions({ 
      content: MarkerContent 
     }); 
     info.open(map, marker); 
    });