Google Maps:Chiusura automatica aperta InfoWindows?

Question

Sul mio sito, utilizzo l'API di Google Maps v3 per posizionare gli indicatori di casa sulla mappa.

Le InfoWindows rimangono aperte a meno che non si faccia clic esplicitamente sull'icona di chiusura.Ciò significa che puoi avere più di 2 InfoWindows aperte alla volta se passi il mouse sopra l'indicatore della mappa.

Domanda:Come posso fare in modo che solo la InfoWindow attualmente attiva sia aperta e tutte le altre InfoWindow siano chiuse?Ciò significa che non sarà aperta più di 1 InfoWindow alla volta?

Answer 1

C'è un close () funzione per la InfoWindows. Basta tenere traccia dell'ultimo finestra aperta, e chiamare la funzione stretta su di esso quando viene creata una nuova finestra.

Questa demo ha la funzionalità che stai cercando. L'ho trovato nella Maps API V3 galleria demo .

Answer 2

soluzione alternativa per questo con l'utilizzo di molte finestre informative:salva la finestra informativa aperta in precedenza in una variabile e poi chiudila quando viene aperta una nuova finestra

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

Questo "movimento" la finestra di informazioni intorno ad ogni cliccato marcatore, in effetti chiudersi, quindi riaprire (e panning per adattarsi alla finestra) nella sua nuova posizione. Cambia il suo contenuto prima di aprire per dare l'effetto desiderato. Opere per i marcatori n.

Answer 4

La mia soluzione.

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

Da questo link http: //www.svennerberg. COM / 2009/09 / google-maps-api-3-infowindows / :

  

Teo: Il modo più semplice per farlo è quello di   semplicemente avere un'istanza del   Infowindow obiettare che si riutilizza oltre   e più volte. In questo modo quando si   fare clic su un nuovo marcatore della infowindow è   “Spostato” da dove è attualmente,   per puntare al nuovo marcatore.

     

Con il suo metodo setContent per caricarlo   con il contenuto corretto.

Answer 6

C'è un modo più semplice oltre ad utilizzare la funzione close (). se si crea una variabile con la proprietà InfoWindow si chiude automaticamente quando si apre un altro.

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

  

Dichiarare una variabile per la finestra attiva

var activeInfoWindow; 

  

e associare questo codice marcatore ascoltatore

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

Answer 8

Come su -

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

    });

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

    });

Poi si può solo librarsi su di esso e si chiuderà in se.

Answer 9

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();
        };
        ...
    }
}

Answer 10

ho conservato una variabile nella parte superiore per tenere traccia di quali finestra di informazioni è aperto, vedere di seguito.

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 11

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