Habe nur ein InfoWindow geöffnet in Google Maps API v3

Question

Ich muss nur ein InfoWindow auf meiner Google Map geöffnet haben. Ich muss alle anderen InfoWindows schließen, bevor ich eine neue öffne.

Kann mir jemand zeigen, wie das geht?

Answer 1

Sie brauchen nur ein InfoWindow Objekt zu erstellen, einen Verweis auf sie halten, und wiederverwenden, wenn für alle Markierungen. :

Wenn Sie nur ein Infofenster wollen auf einmal angezeigt werden (wie das Verhalten von Google Maps ist), müssen Sie nur ein Info-Fenster erstellen, die Sie an verschiedenen Orten oder Markierungen auf der Karte Ereignissen zuweisen können (wie Benutzerklicks).

Daher können Sie wollen einfach nur das InfoWindow-Objekt erstellen, nachdem Sie Ihre Karte initialisieren, und dann behandeln den click Event-Handler Ihres Markers wie folgt. Angenommen, Sie haben einen Marker haben someMarker genannt:

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

Dann wird die InfoWindow sollte automatisch schließen, wenn Sie auf eine neue Markierung klicken, ohne die close() Methode aufrufen zu müssen.

Answer 2

Mit Google Maps können Sie nur ein Informationsfenster öffnen. Wenn Sie also ein neues Fenster öffnen, wird das andere automatisch geschlossen.

Answer 3

Sie benötigen den Überblick über Ihre vorherigen InfoWindow Objekt zu halten und die schließen Methode auf sie aufrufen, wenn Sie das Click-Ereignis auf einem neuen Marker behandeln.

N.B Es ist nicht notwendig, das geteilte Info-Fenster-Objekt zu schließen, wenn Sie mit einem anderen Marker öffnen, wird das Original automatisch geschlossen. Einzelheiten finden Sie unter Daniel's answer.

Answer 4

Erstellen Sie Ihr Infowindow aus dem Bereich, damit Sie es teilen können.

Hier ist ein einfaches Beispiel:

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 5

Ich hatte das gleiche Problem, aber die beste Antwort löste es nicht vollständig, was ich in meiner for-Anweisung tun musste, war das, das sich auf meinen aktuellen Marker bezieht. Vielleicht hilft das jemandem.

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 6

Grundsätzlich wollen Sie eine Funktion, die Bezugnahme auf eine new InfoBox() => delegieren das Onclick-Ereignis hält. Während Ihre Markierungen (in einer Schleife) Erzeugen verwenden 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 asynchron zugeordnet und im Speicher gehalten. Jedes Mal, wenn Sie bindInfoBox() anrufen, wird stattdessen die Rückkehrfunktion aufgerufen. Auch praktisch, um die infoBoxOptions nur einmal zu übergeben!

In meinem Beispiel musste ich einen zusätzlichen Parameter zu der map hinzufügen, da meine Initialisierung durch Tab-Ereignisse verzögert wird.

InfoBoxOptions

Answer 7

ein bisschen spät, aber ich schaffte es nur eine haben Infofenster geöffnet von maken eine globale Variable Infofenster.

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

dann innerhalb des listner

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

infowindow.open(map, this); 

Answer 8

Deklarieren Sie eine GLOBAR var selectedInfoWindow; und es verwenden, die geöffnete Infofenster zu halten:

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 9

Gelöst es so:

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

Hier ist ein Lösung, die nicht nur ein InfoWindow erstellen muss, um es wiederzuverwenden. Sie können weiterhin viele InfoWindows erstellen, Sie müssen lediglich eine closeAllInfoWindows-Funktion erstellen und sie aufrufen, bevor Sie ein neues Infofenster öffnen. So , Ihren Code zu halten, müssen Sie nur:

1. ein globales Array Erstellen Sie alle Infofenster speichern

   var infoWindows = []; 
   

2. Shop jede neue infowindow im Array, kurz nach dem infowindow = new ...

   infoWindows.push(infoWindow); 
   

3. die Funktion closeAllInfoWindows erstellen

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

4. Rufen Sie in Ihrem Code kurz vor dem Öffnen des InfoWindows closeAllInfoWindows() auf.

Grüße,