Google Maps infoWindow загружает только последнюю запись по маркерам

Question

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

<script type="text/javascript"> 


//Load the Google Map with Options//
  function initialize() {
    var myLatlng = new google.maps.LatLng(42.48019996901214, -90.670166015625);
    var myOptions = {
      zoom: 6,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    //Begin query loop to set the markers and infoWindow content//

    <cfoutput query="GetCoord">
    var LatLng = new google.maps.LatLng(#Client_Lat#, #Client_Lng#);

    var marker = new google.maps.Marker({
        position: LatLng,
        map: map,
        title: "#Client_Company#"
    });   

    var contentString = '<p><b>#Client_Company#</b><br>'+
                        '#Client_Address#<br>'+
                        '#Client_City#,&nbsp; #Client_State# &nbsp; #Client_Zip#<br>'+
                        '<a href="member_detail.cfm?ID=#Client_ID#">View Details</a>';

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

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

     });
    </cfoutput>
    //End query loop
    }

</script>

Есть идеи, почему это происходит?

Answer 1

Добавьте content в качестве свойства к маркерному объекту и используйте this.content в обработчике событий:

var marker = new google.maps.Marker(options);
marker.content = '<div>Content goes here....</div>';

var infoWindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function () {
                                infoWindow.setContent(this.content);
                                infoWindow.open(this.getMap(), this);
                            });

Answer 2

В вашем коде вы статически устанавливаете содержимое информационного окна при загрузке с помощью

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

Затем, когда вы нажимаете на свои маркеры, вы просто открываете это информационное окно

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

, это будет отображать то жесодержание для каждого маркера, вы не хотите этого.

---

что вы хотите сделать, это создать только одно информационное окно без содержимого (до цикла с маркером).затем при нажатии на маркер прикрепите содержимое к информационному окну ... затем откройте информационное окно.Это сохранит строки кода и автоматически закроет информационное окно.

перед созданием маркеров (с циклом) добавьте это

infowindow = new google.maps.InfoWindow();

в код маркера и добавьте вызов infowindow.setContent

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

 });