Карты Google: автоматическое закрытие открытых информационных окон?

Question

На моем сайте я использую Google Maps API v3 для размещения маркеров домов на карте.

Информационные окна остаются открытыми, если вы явно не щелкните значок закрытия Это означает, что вы можете одновременно открыть более 2 информационных окон, если навести указатель мыши на маркер карты.

Вопрос : Как мне сделать так, чтобы только текущее активное информационное окно было открыто, а все остальные информационные окна были закрыты? То есть одновременно будет открыто не более 1 InfoWindow?

Answer 1

Для InfoWindows существует функция close () . Просто следите за последним открытым окном и вызывайте для него функцию закрытия при создании нового окна.

Эта демоверсия обладает нужной вам функциональностью. Я нашел его в демонстрационной галерее Maps API V3 .

Answer 2

альтернативное решение для этого с использованием многих информационных окон: сохранить предыдущее открытое информационное окно в переменной и затем закрыть его при открытии нового окна

var prev_infowindow =false; 
...
base.attachInfo = function(marker, i){
    var infowindow = new google.maps.InfoWindow({
        content: 'yourmarkerinfocontent'
    });

    google.maps.event.addListener(marker, 'click', function(){
        if( prev_infowindow ) {
           prev_infowindow.close();
        }

        prev_infowindow = infowindow;
        infowindow.open(base.map, marker);
    });
}

Answer 3

//assuming you have a map called 'map'
var infowindow = new google.maps.InfoWindow();

var latlng1 = new google.maps.LatLng(0,0);
var marker1 = new google.maps.Marker({position:latlng1, map:map});
google.maps.event.addListener(marker1, 'click',
    function(){
        infowindow.close();//hide the infowindow
        infowindow.setContent('Marker #1');//update the content for this marker
        infowindow.open(map, marker1);//"move" the info window to the clicked marker and open it
    }
);
var latlng2 = new google.maps.LatLng(10,10);
var marker2 = new google.maps.Marker({position:latlng2, map:map});
google.maps.event.addListener(marker2, 'click',
    function(){
        infowindow.close();//hide the infowindow
        infowindow.setContent('Marker #2');//update the content for this marker
        infowindow.open(map, marker2);//"move" the info window to the clicked marker and open it
    }
);

Это «переместит» информационное окно к каждому нажатому маркеру, фактически закроет себя, затем снова откроет (и проведет панорамирование, чтобы соответствовать области просмотра) в новом месте. Он изменяет свое содержимое перед открытием, чтобы дать желаемый эффект. Работает для n маркеров.

Answer 4

Мое решение.

var map;
var infowindow = new google.maps.InfoWindow();
...
function createMarker(...) {
var marker = new google.maps.Marker({
     ...,
     descrip: infowindowHtmlContent  
});
google.maps.event.addListener(marker, 'click', function() {
    infowindow.setOptions({
        content: this.descrip,
        maxWidth:300
    });
    infowindow.open(map, marker);
});

Answer 5

По этой ссылке http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/:

Тео: Самый простой способ сделать это просто есть один экземпляр InfoWindow объект, который вы используете повторно и снова. Таким образом, когда ты щелкните новый маркер, окно информации - «Переехал» из того места, где он сейчас находится, указать на новый маркер.

Используйте метод setContent, чтобы загрузить его с правильным содержанием.

Answer 6

Существует более простой способ, кроме использования функции close (). если вы создаете переменную со свойством InfoWindow, она автоматически закрывается при открытии другой.

var info_window;
var map;
var chicago = new google.maps.LatLng(33.84659, -84.35686);

function initialize() {
    var mapOptions = {
        center: chicago,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

    info_window = new google.maps.InfoWindow({
        content: 'loading'
    )};

createLocationOnMap('Location Name 1', new google.maps.LatLng(33.84659, -84.35686), '<p><strong>Location Name 1</strong><br/>Address 1</p>');
createLocationOnMap('Location Name 2', new google.maps.LatLng(33.84625, -84.36212), '<p><strong>Location Name 1</strong><br/>Address 2</p>');

}

function createLocationOnMap(titulo, posicao, conteudo) {            
    var m = new google.maps.Marker({
        map: map,
        animation: google.maps.Animation.DROP,
        title: titulo,
        position: posicao,
        html: conteudo
    });            

    google.maps.event.addListener(m, 'click', function () {                
        info_window.setContent(this.html);
        info_window.open(map, this);
    });
}

Answer 7

Как насчет -

google.maps.event.addListener(yourMarker, 'mouseover', function () {
        yourInfoWindow.open(yourMap, yourMarker);

    });

google.maps.event.addListener(yourMarker, 'mouseout', function () {
        yourInfoWindow.open(yourMap, yourMarker);

    });

Тогда вы можете просто навести на него курсор, и он закроется сам.

Answer 8

Объявление переменной для активного окна

var activeInfoWindow; 

и свяжите этот код в обработчике маркеров

 marker.addListener('click', function () {
    if (activeInfoWindow) { activeInfoWindow.close();}
    infowindow.open(map, marker);
    activeInfoWindow = infowindow;
});

Answer 9

Я сохранил переменную вверху, чтобы отслеживать, какое информационное окно открыто в данный момент, см. Ниже.

var currentInfoWin = null;
google.maps.event.addListener(markers[counter], 'click', function() {      
    if (currentInfoWin !== null) {
        currentInfoWin.close(map, this); 
    }
    this.infoWin.open(map, this); 
    currentInfoWin = this.infoWin;  
}); 

Answer 10

var map;
var infowindow;
...
function createMarker(...) {
    var marker = new google.maps.Marker({...});
    google.maps.event.addListener(marker, 'click', function() {
        ...
        if (infowindow) {
            infowindow.close();
        };
        infowindow = new google.maps.InfoWindow({
            content: contentString,
            maxWidth: 300
        });
        infowindow.open(map, marker);
    }
...
function initialize() {
    ...
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    ...
    google.maps.event.addListener(map, 'click', function(event) {
        if (infowindow) {
            infowindow.close();
        };
        ...
    }
}