Google Maps: Fechar automaticamente o InfoWindows?

108

No meu site , estou usando a API do Google Maps v3 para colocar marcadores de casas no mapa.

As InfoWindows permanecem abertas, a menos que você clique explicitamente no ícone Fechar. Ou seja, você pode ter 2+ InfoWindows abertos ao mesmo tempo se passar o mouse sobre o marcador do mapa.

Pergunta : Como faço para que apenas a InfoWindow ativa atual seja aberta e todas as outras InfoWindows sejam fechadas? Ou seja, não mais do que 1 InfoWindow será aberta por vez?

Ted
fonte
1
Para mim é melhor criar apenas uma janela de informações e atualizá-la (seu conteúdo e etc), abrir e fechar e tudo. Mas tenho certeza de que essa abordagem nem sempre é aplicável.
andrii

Respostas:

154

Existe uma função close () para InfoWindows. Apenas acompanhe a última janela aberta e chame a função de fechamento quando uma nova janela for criada.

Esta demonstração tem a funcionalidade que você procura. Eu o encontrei na galeria de demonstração da API do Google Maps V3 .

Chris B
fonte
4
Votado para a sugestão de controlar apenas a última janela aberta. Parece um acéfalo, mas as pessoas esquecem essas coisas ...
Rémi Breton
1
Acabei de usar exatamente a mesma técnica. Obrigado Chris. Foi necessário para mim, porque estou usando uma matriz de objetos InfoWindow em vez de apenas um que circula e pega as informações pertinentes. Cada InfoWindow tem suas próprias informações de atualização separadamente, portanto, achei essa técnica bastante útil.
InterfaceGuy
2
o link "esta demonstração" está quebrado
Brendan Whiting
Muito obrigado! Usei essa abordagem e funcionou como um encanto. Você consertou meu dia. Votado.
Alan Espinet
64

solução alternativa para isso usando várias janelas de informação: salve a janela de informações anterior aberta em uma variável e feche-a quando uma nova janela for aberta

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);
    });
}
Mike
fonte
3
Como este. Simples de entender e implementar
Aamir Afridi
6
Perdoe minha ingenuidade, mas WTF é vil?
wordsforthewise
Não entendo por que não é o comportamento padrão no Google Maps V3 ...
Sr. Washington
A melhor e mais simples solução que encontrei até agora. obrigado!
Irteza Asad
27
//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
    }
);

Isso "moverá" a janela de informações ao redor de cada marcador clicado, fechando-se de fato e reabrindo (e girando para caber na janela de visualização) em seu novo local. Ele muda seu conteúdo antes de abrir para dar o efeito desejado. Funciona para n marcadores.

Joel Mellon
fonte
1
Observação rápida: chamadas repetidas para infowindow.open () são suficientes; a janela não precisa ser fechada primeiro.
Eric Nguyen
3
@Eric, embora você esteja tecnicamente correto, notei um bug que às vezes faz com que as janelas de informações apareçam em sua última posição. Forçar o primeiro fechado derrota o bug.
Joel Mellon
22

Minha solução.

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);
});
Kaidoj
fonte
3
Isso é muito elegante - usar apenas uma única janela de informações e alterar o conteúdo evita ter que acompanhar / fechar a anterior.
Nick F
Esta solução é muito elegante e funciona perfeitamente. +1
Sebastian Breit
9

Deste link http://www.svennerberg.com/2009/09/google-maps-api-3-infowindows/ :

Teo: A maneira mais fácil de fazer isso é ter apenas uma instância do objeto InfoWindow que você reutiliza continuamente. Dessa forma, quando você clica em um novo marcador, a infoWindow é “movida” de onde está atualmente, para apontar para o novo marcador.

Use seu método setContent para carregá-lo com o conteúdo correto.

Keith Adler
fonte
Não acredito que isso se aplique, pois estou usando a API v3 do Google Maps
Ted
Além disso, o artigo que você vinculou também não demonstra mais de 1 marcador
Ted
Usei uma única janela de informações da mesma maneira para vários sites. Clique em um, o aberto fecha automaticamente.
Keith Adler
4
Como você associa várias marcas a uma única InfoWindow?
Ted
7

Declare uma variável para a janela ativa

var activeInfoWindow; 

e vincular este código no listener do marcador

 marker.addListener('click', function () {
    if (activeInfoWindow) { activeInfoWindow.close();}
    infowindow.open(map, marker);
    activeInfoWindow = infowindow;
});
Hardeep Singh
fonte
Obrigado, realmente funciona ao clicar em qualquer lugar do mapa.
Varinder Singh Baidwan
Saúde cara, de todas as sugestões, essa funcionou melhor para mim e é AF limpo.
Matthew Ellis
4

Existe uma maneira mais fácil além de usar a função close (). se você criar uma variável com a propriedade InfoWindow, ela fecha automaticamente quando você abre outra.

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);
    });
}
MelloG
fonte
1
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();
        };
        ...
    }
}
DK
fonte
Obrigado, eu precisava fechar a janela de informações quando não clicava em um marcador, apenas no mapa
VRC
1

E se -

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

    });

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

    });

Em seguida, você pode simplesmente passar o mouse sobre ele e ele se fechará.

Nathan
fonte
Esta é uma solução interessante, mas não responde à pergunta e não funcionaria em dispositivos somente de toque.
Lee
1

Eu armazenei uma variável no topo para manter o controle de qual janela de informações está aberta no momento, veja abaixo.

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;  
}); 
P Nelson
fonte
O que o [contador] está fazendo aqui?
Lee
0

Aqui está o que eu usei se você estiver usando muitos marcadores em um loop for (Django aqui). Você pode definir um índice em cada marcador e definir esse índice sempre que abrir uma janela. Fechando o índice salvo anteriormente:

markers = Array();
infoWindows = Array();
var prev_infowindow =false;
{% for obj in objects %}
var contentString = 'your content'
var infowindow = new google.maps.InfoWindow({
            content: contentString,
          });
var marker = new google.maps.Marker({
               position: {lat: {{ obj.lat }}, lng: {{ obj.lon }}},
               map: map,
               title: '{{ obj.name }}',
               infoWindowIndex : {{ forloop.counter0 }}
          });
google.maps.event.addListener(marker, 'click',
            function(event)
            {
           if( prev_infowindow ) {
               infoWindows[prev_infowindow].close();
                }
                prev_infowindow = this.infoWindowIndex;
                infoWindows[this.infoWindowIndex].open(map, this);
            }
        );

        infoWindows.push(infowindow);
        markers.push(marker);

      {% endfor %}
Josh
fonte
-1
var contentString = "Location: " + results[1].formatted_address;    
google.maps.event.addListener(marker,'click', (function(){ 
    infowindow.close();
    infowindow = new google.maps.InfoWindow({
        content: contentString
    });
    infowindow.open(map, marker);
}));
Sai
fonte