Google отображает информационное окно на неправильном маркере

Question

У меня есть фрагмент кода 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);
    });
}

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

Answer 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);
    });
}

Answer 2

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

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

Answer 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);
    });
}

Answer 4

В качестве новой опции, которая не была доступна 7 лет назад:

все современные браузеры (все браузеры, поддерживающие ECMAScript 6) поддерживают переменные области блока, которые определяются с помощью let заявление.let инициализирует переменную внутри заданной области видимости, например, внутри цикла, тогда как var определяет переменные на глобальном или функциональном уровне.В вашем случае замена var на let обеспечит правильную инициализацию каждого маркера в качестве новой переменной:

for (var i = 0; i < 8; i++) {
    let 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',
    });
    let infowindow = new google.maps.InfoWindow({
        content: 'test string'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}

Answer 5

Попробуйте это:

        // 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);
        });

Спасибо