Google отображает информацию о неверном маркере

У меня есть часть кода javascript, где я создаю маркеры и прикрепляю к ним InfoWindows, например:

for (var i = 0; i < 8; i++) {
    var marker = new google.maps.Marker({
       map: map,
       position: new google.maps.LatLng(lat[i], lng[i]),
       icon: '/static/images/iconsets/gmap/iconb' + (i+1) + '.png',
    });
    var infowindow = new google.maps.InfoWindow({
        content: 'test string'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}

Но когда я нажимаю один из маркеров, infowindow всегда показывает только один маркер. Что я делаю неправильно?

Ответы

Ответ 1

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

Итак, когда вы помещаете его в функцию, переменная находится в отдельном пространстве имен и, следовательно, не перезаписывается. Другими словами, это должно работать:

for (var i = 0; i < 8; i++) {
    createMarker(i);
}

function createMarker(i) {
    var marker = new google.maps.Marker({
        map: map,
        position: new google.maps.LatLng(lat, lng),
        icon: '/static/images/iconsets/gmap/iconb' + (i+1) + '.png',
    });
    var infowindow = new google.maps.InfoWindow({
        content: 'test string'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}

Ответ 2

google.maps.event.addListener(Marker, 'click', function() {
    InfoWindow.open(map, this);
});

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

Ответ 3

for (var i = 0; i < 8; i++) {
    var marker = new google.maps.Marker({
       map: map,
       position: new google.maps.LatLng(lat[i], lng[i]),
       icon: '/static/images/iconsets/gmap/iconb' + (i+1) + '.png',
       content: 'test string'
    });
    google.maps.event.addListener(marker, 'click', function() {
        new google.maps.InfoWindow({
            content: this.content
        }).open(map, this);
    });
}

Ответ 4

Попробуйте следующее:

        // Create a marker for each place.
         marker = new google.maps.Marker({
             map: map,
             icon: icon,
             title: place.name,
             animation: google.maps.Animation.DROP,
             position: place.geometry.location
         });
         var infowindow = new google.maps.InfoWindow({
         content:'<div><strong>' + place.name + '</strong><br>' +
            'Place ID: ' + place.place_id + '<br>' +
            place.formatted_address + '</div>'
            });
        marker.addListener('click', function() {
        infowindow.open(map, this);
        });

Спасибо