Карты Google - несколько маркеров - 1 проблема InfoWindow

Question

Я не могу заставить свои маркеры отображать разные информационные окна. Маркеры всегда отображают содержимое последней строки "contentString".

Я прочитал несколько других постов, но, похоже, ни один из них не помог.

Это код:

    function setMarkers(branches, map) {
        var bounds = new google.maps.LatLngBounds();
        var contentString = null;
        var infowindow = null;
        infowindow = new google.maps.InfoWindow();
        for (var i = 0; i < branches.length; i++) {
            var marker = null;
            branch = branches[i];
            var myLatlngMarker = new google.maps.LatLng(branch[0], branch[1]);
            contentString = '<p>' + branch[3] + '</p>';

            var marker = new google.maps.Marker({
                position: myLatlngMarker,
                map: map,
                title: branch[2]
            });

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

            bounds.extend(myLatlngMarker);
        }

        map.fitBounds(bounds);
    }

Кто-нибудь может увидеть, что я делаю не так?

Спасибо

Answer 1

правый

Я нашел решение. Я добавил дополнительное свойство к маркеру с именем «info», а затем сослался на него из события «addlistener» infowindow.setContent (this.info) '.

Вот обновленный код:

function setMarkers(branches, map) {
    var marker = null;
    var infowindow = new google.maps.InfoWindow();
    var bounds = new google.maps.LatLngBounds();

    for (var i = 0; i < branches.length; i++) {
        branch = branches[i];

        var myLatlngMarker = new google.maps.LatLng(branch[0], branch[1]);

        var marker = new google.maps.Marker({
            position: myLatlngMarker,
            map: map,
            title: branch[2],
            info: branch[3],
            icon: '<%=Icon%>'
        });

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

        bounds.extend(myLatlngMarker);
    }

    map.fitBounds(bounds);
}

Answer 2

Причина, по которой он всегда отображает последнюю строку contentString, заключается в том, что она устанавливается при срабатывании события click. Он перезаписывается в каждой итерации цикла for.

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

google.maps.event.addListener(marker, 'click', function(content) {
    return function(){
        infowindow.setContent(content);//set the content
        infowindow.open(map,this);
    }
}(contentString));

Answer 3

Вы пытались объявить infowindow и contentString внутри цикла for, а не вне цикла?

function setMarkers(branches, map) {
        var bounds = new google.maps.LatLngBounds();

        for (var i = 0; i < branches.length; i++) {
            var infowindow = new google.maps.InfoWindow();
            var contentString = "";
            var marker = null;
            branch = branches[i];
            var myLatlngMarker = new google.maps.LatLng(branch[0], branch[1]);
            contentString = '<p>' + branch[3] + '</p>';

            var marker = new google.maps.Marker({
                position: myLatlngMarker,
                map: map,
                title: branch[2]
            });

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

            bounds.extend(myLatlngMarker);
        }

        map.fitBounds(bounds);
    }

Answer 4

Один из способов получить серьезно динамическую информацию в информационном окне, если у вас есть php или что-то подобное, - установить содержимое информационного окна в виде фрейма с помощью src, который получает информацию из позиции или идентификатора соответствующего маркера.Так в функции инициализации или где угодно.

var pos_info = new google.maps.InfoWindow({pixelOffset: new google.maps.Size(0, -5), maxWidth: 350, position: posit, ID: "pos_i"});

var pos_mark = new google.maps.Marker({map: map, position: posit, clickable: true, draggable: true, ID: "pos_m", icon: therm2});

pos_mark.addListener('mouseup', function () {
var lat = pos_mark.getPosition().lat();
lat = lat.toFixed(4)
var lng = pos_mark.getPosition().lng();
lng = lng.toFixed(4)
var contentString = "<iframe class='info' src='pos_info.php?lat="+lat+"&lng="+lng+"'></iframe>"
pos_info.setContent(contentString);
pos_info.open(map, pos_mark);
})

Answer 5

У меня та же проблема.Я смог показать заголовок по-другому, используя этот код:

  setMarkers(map, airports);
 }

 function setMarkers(map, locations) 
   {
     //you only need 1 infoWindow
     var infowindow = new google.maps.InfoWindow({
       content: "holding" //content will be set later
     });

     for (var i = 0; i < locations.length; i++) 
     {
       var airport = locations[i];
       var myLatLng = new google.maps.LatLng(airport[1], airport[2]);
       var marker = new google.maps.Marker({
             position: myLatLng,
             map: map,
            title: airport[0],
            zIndex: airport[3],
             html: airport[4],
      });




       google.maps.event.addListener(marker, 'click', function() {
               infowindow.setContent(this.html);//set the content
               infowindow.open(map,this);
       });
     }
   }