Tenha apenas uma infowindow aberta no Google Maps API V3

Question

Eu preciso ter apenas uma infowindow aberta no meu mapa do Google. Preciso fechar todas as outras informações antes de abrir uma nova.

Alguém pode me mostrar como fazer isso?

Answer 1

Você precisa criar apenas um InfoWindow Objeto, mantenha uma referência a ele e reutilize se para todos os marcadores. Citando os documentos da API do Google Maps:

Se você deseja que apenas uma janela de informações seja exibida por vez (como é o comportamento no Google Maps), você precisa apenas criar uma janela de informações, que pode reatribuir para diferentes locais ou marcadores nos eventos do mapa (como cliques de usuário).

Portanto, você pode simplesmente querer criar o InfoWindow Objeto logo após a inicialização do seu mapa e depois lidar com o click Manipuladores de eventos de seus marcadores da seguinte forma. Digamos que você tenha um marcador chamado someMarker:

google.maps.event.addListener(someMarker, 'click', function() {
   infowindow.setContent('Hello World');
   infowindow.open(map, this);
});

Então o InfoWindow deve fechar automaticamente quando você clicar em um novo marcador sem ter que ligar para o close() método.

Answer 2

Crie sua infowindow fora do escopo para que você possa compartilhá -lo.

Aqui está um exemplo simples:

var markers = [AnArrayOfMarkers];
var infowindow = new google.maps.InfoWindow();

for (var i = 0, marker; marker = markers[i]; i++) {
  google.maps.event.addListener(marker, 'click', function(e) {
    infowindow.setContent('Marker position: ' + this.getPosition());
    infowindow.open(map, this);
  });
}

Answer 3

Eu tive o mesmo problema, mas a melhor resposta não a resolveu completamente, o que eu tinha que fazer na minha declaração foi usando isso relacionado ao meu marcador atual. Talvez isso ajude alguém.

for(var i = 0; i < markers.length; i++){
    name = markers[i].getAttribute("name");
    address = markers[i].getAttribute("address");        
    point = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng")));                                     
    contentString = '<div style="font-family: Lucida Grande, Arial, sans-serif;>'+'<div><b>'+ name +'</b></div>'+'<div>'+ address +'</div>';                    
    marker = new google.maps.Marker({                       
        map: map,
        position: point,
        title: name+" "+address,
        buborek: contentString 
    });                                     
    google.maps.event.addListener(marker, 'click', function(){
        infowindow.setContent(this.buborek); 
        infowindow.open(map,this); 
    });                                                         
    marker.setMap(map);                 
}

Answer 4

Um pouco atrasado, mas consegui ter apenas uma infowindow aberta por Maken Infowindrow uma variável global.

var infowindow = new google.maps.InfoWindow({});

então dentro do listner

infowindow.close();
infowindow = new google.maps.InfoWindow({   
    content: '<h1>'+arrondissement+'</h1>'+ gemeentesFiltered                           
});

infowindow.open(map, this);

Answer 5

Declarar um globar var selectedInfoWindow; e use -o para segurar a janela de informações abertas:

var infoWindow = new google.maps.InfoWindow({
    content: content
});

// Open the infowindow on marker click
google.maps.event.addListener(marker, "click", function() {
    //Check if there some info window selected and if is opened then close it
    if (selectedInfoWindow != null && selectedInfoWindow.getMap() != null) {
        selectedInfoWindow.close();
        //If the clicked window is the selected window, deselect it and return
        if (selectedInfoWindow == infoWindow) {
            selectedInfoWindow = null;
            return;
        }
    }
    //If arrive here, that mean you should open the new info window 
    //because is different from the selected
    selectedInfoWindow = infoWindow;
    selectedInfoWindow.open(map, marker);
});

Answer 6

Você precisa acompanhar o seu anterior Infowindow objeto e ligue para o perto Método quando você lida com o evento de clique em um novo marcador.

Nb Não é necessário ligar para fechar o objeto da janela de informações compartilhadas, chamando o aberto com um marcador diferente fechará automaticamente o original. Ver A resposta de Daniel para detalhes.

Answer 7

Basicamente, você quer uma função que mantém referência a um new InfoBox() => Delegue o evento OnClick. Ao criar seus marcadores (em um loop), uso bindInfoBox(xhr, map, marker);

// @param(project): xhr : data for infoBox template
// @param(map): object : google.maps.map
// @param(marker): object : google.maps.marker
bindInfoBox: (function () {
    var options = $.extend({}, cfg.infoBoxOptions, { pixelOffset: new google.maps.Size(-450, -30) }),
        infoBox = new window.InfoBox(options);

    return function (project, map, marker) {
        var tpl = renderTemplate(project, cfg.infoBoxTpl); // similar to Mustache, Handlebars

        google.maps.event.addListener(marker, 'click', function () {
            infoBox.setContent(tpl);
            infoBox.open(map, marker);
        });
    };
}())

var infoBox é atribuído de forma assíncrona e mantida na memória. Cada vez que você liga bindInfoBox() A função de retorno será chamada em vez disso. Também é útil para passar o infoBoxOptions apenas uma vez!

No meu exemplo, tive que adicionar um param extra ao map Como minha inicialização é atrasada pelos eventos da guia.

InfoBoxOptions

Answer 8

Aqui está uma solução que não precisa criar apenas uma infowindow para reutilizá -la. Você pode continuar criando muitas infowindows, a única coisa que você precisa é construir uma função do ClosELlinFowindows e chamá -lo antes de abrir uma nova infowindow. Então, mantendo seu código, você só precisa:

1. Crie uma matriz global para armazenar todas as informações

   var infoWindows = [];
   

2. Armazene cada nova infowindow na matriz, logo após a infowindow = new ...

   infoWindows.push(infoWindow);
   

3. Crie a função do closeAllinFowindows

   function closeAllInfoWindows() {
       for (var i=0;i<infoWindows.length;i++) {
           infoWindows[i].close();
       }
   }
   

4. No seu código, ligue para o ruclelinFowindows () pouco antes de abrir a infowindow.

Cumprimentos,

Answer 9

Resolveu desta maneira:

function window(content){
    google.maps.event.addListener(marker,'click', (function(){
        infowindow.close();
        infowindow = new google.maps.InfoWindow({
            content: content
        });
        infowindow.open(map, this);
    }))
}
window(contentHtml);

Answer 10

O Google Maps permite que você tenha apenas uma janela de informações aberta. Portanto, se você abrir uma nova janela, o outro fecha automaticamente.