Настройка маркеров кластера маркеров с информационными окнами

Question

У меня проблема с настройкой информационных окон для нескольких маркеров в Google Map API.По сути, я получаю широты и долготы и все остальное из внешнего файла Json.Я правильно анализирую, потому что маркеры отображаются на карте.Однако, когда я пытаюсь добавить информационное окно для каждого из них, оно отображает информационное окно только для самого последнего добавленного маркера + всякий раз, когда я указываю на другой маркер, оно все равно переходит к этому последнему маркеру, показывающему его информационное окно.Вот исходный код:

  function initialize() 
  {
    var latlng = new google.maps.LatLng(-34.397, 150.644);

    var myOptions = {
      zoom: 1,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("tab14"), myOptions);

    /* Sets up markers */    
    markers = []; 

      for (var i = 0, coordinates; coordinates = data.coords[i]; i++) 
      {
      //marker = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);

        var iconImage = new google.maps.MarkerImage("http://map.lgfl.org.uk/images/arrow_green.png");
             var LatLng = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);
              var marker = new google.maps.Marker({position: LatLng, icon: iconImage });

        var contentString = '<div>'+
              '<div>'+
              '</div>'+
             '<h4>'+coordinates.title+'</h1>'+
              '<div>'+
              '<p>'+coordinates.excerpt+'</p>'+
                 '</div>'+
              '</div>';

      var infowindow = new google.maps.InfoWindow({
        content: contentString
      });

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


        markers.push(marker);
      }

      /* Sets up marker clusterer */
      var markerCluster = new MarkerClusterer(map, markers); 
  }

Может кто-нибудь, пожалуйста, помогите мне с этим?Спасибо.

// Отредактировано ------------------------------------------------------

Итак, я изменил это, и теперь это выглядит так:

infoWindow = new google.maps.InfoWindow();

  for (var i = 0, coordinates; coordinates = data.coords[i]; i++) 
  {
              //marker = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);

                var iconImage = new google.maps.MarkerImage("http://map.lgfl.org.uk/images/arrow_green.png");
               var LatLng = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);
                var marker = new google.maps.Marker({position: LatLng, icon: iconImage });

                var contentString = '<div>'+
                                     '<div>'+
                                  '</div>'+
                                    '<h4>'+coordinates.title+'</h1>'+
                                  '<div>'+
                                     '<p>'+coordinates.excerpt+'</p>'+
                                     '</div>'+
                                  '</div>';

              google.maps.event.addListener(marker, 'click', function() {
                        infoWindow.setContent(contentString);
                       infoWindow.open(map,marker);
                });

                markers.push(marker);
  }

  /* Sets up marker clusterer */
  var markerCluster = new MarkerClusterer(map, markers); 

Все еще не работает: /

Answer 1

Хорошо, я нашел решение для этого.Это что-то вроде взлома, но у меня это работает.Я помещаю это здесь в случае, если кому-то еще это понадобится:

    <script type="text/javascript">

  /* Sets up the map with markers */
  function initialize() 
  {
    var latlng = new google.maps.LatLng(-34.397, 150.644);

    var myOptions = {
      zoom: 1,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("tab14"), myOptions);

      /* Sets up markers */    
         markers = []; 

      infoWindow = new google.maps.InfoWindow();              

      for (var i = 0, coordinates; coordinates = data.coords[i]; i++) 
      {              

                    var iconImage = new google.maps.MarkerImage("http://map.lgfl.org.uk/images/arrow_green.png");
                   var LatLng = new google.maps.LatLng(coordinates.latitude, coordinates.longitude);
                    var marker = new google.maps.Marker({position: LatLng, icon: iconImage });

                    var contentString = '<div>'+
                                        '<h4>'+coordinates.title+'</h1>'+
                                      '<div>'+
                                         '<p>'+coordinates.excerpt+'</p>'+
                                         '</div>'+
                                      '</div>';

                  addMarker(marker, contentString);
                    markers.push(marker);
      }

      /* Sets up marker clusterer */
      var markerCluster = new MarkerClusterer(map, markers); 


      function addMarker(marker, content)
        {
           google.maps.event.addListener(marker, 'click', function() {
                           infoWindow.setContent(content);
                           infoWindow.open(map, marker);
         });
        }

  }

</script>

Answer 2

Насколько я знаю, у вас может быть только одно InfoWindow.Вы должны добавить событие onclick для каждого маркера, в котором вы определяете содержимое окна.

Я думаю, вы должны изменить:

var infowindow = new google.maps.InfoWindow({
                content: contentString
              });

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

на что-то вроде:

google.maps.event.addListener(marker, 'click', function() {
                infowindow.setContent(contentString);
                infowindow.open(map,marker);
              });

Информационное окно должно быть определено вне вашего цикла for.

Удачи!

** EDIT **

Я думаю, вам нужно использовать уникальные имена для ваших маркеров.

Это рабочий пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script src="http://maps.google.com/maps/api/js?v=3&amp;sensor=false&amp;key=
    <<INSERT YOUR KEY HERE>>" type="text/javascript"></script>
<script>
function initialize() {
// Create google map
var latlng = new google.maps.LatLng(31.0293534,5.1736923);
var myOptions = {
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    zoom: 1,
    backgroundColor: "#99B3CC",
    mapTypeControl: false
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var infoWindow = new google.maps.InfoWindow();

/**
 * First marker
 */

var latLng = new google.maps.LatLng(31.0293534,5.1736923);
var marker1 = new google.maps.Marker({
    map: map,
    position: latLng,
    visible: true
});


google.maps.event.addListener(marker1, 'click', function() {
    infoWindow.setContent("Some content Marker 1");
    infoWindow.open(map,marker1);
});

/**
 * Second marker
 */

var latLng = new google.maps.LatLng(25.271139,55.307485);
var marker2 = new google.maps.Marker({
    map: map,
    position: latLng,
    visible: true
});
marker2.onclick = function() {
    infoWindow.setContent("Some content marker2");
    infoWindow.open(map,marker2);
};
google.maps.event.addListener(marker2, 'click', function() {
    infoWindow.setContent("Some content marker2");
    infoWindow.open(map,marker2);
}); 
}
window.onload=initialize; 
</script>

</head>
<body>
<div id="map" style="width: 400px; height: 400px;"></div>
</body>
</html>

Возможно, вам придется изменить ключ.Но у меня дома это работает как шарм.Самый простой пример, который я могу привести.