Mehrere Marker mit Infowindow

Question

Wir verwenden mehrere Marker mit Infowindow. Alles funktioniert gut. Das Problem ist, wenn wir auf Marker klicken, öffnet sich das Infowindow aber es schließt nicht, wenn andere Marker klicken. es bleibt geöffnet. So können Lösungen für dieses Problem geben.

Der Code ist in http://goo.gl/s0WZx

var berlin = new google.maps.LatLng(52.520816, 13.410186); 
    var neighborhoods = [ 
    new google.maps.LatLng(52.511467, 13.447179), 
    new google.maps.LatLng(52.549061, 13.422975), 
    new google.maps.LatLng(52.497622, 13.396110), 
    new google.maps.LatLng(52.517683, 13.394393) 
    ]; 

    var markers = []; 
    var iterator = 0; 

    var map; 

    function initialize() { 
    var mapOptions = { 
     zoom: 12, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     center: berlin 
    }; 

    map = new google.maps.Map(document.getElementById("map_canvas"), 
      mapOptions); 
    } 

    function drop() { 
    for (var i = 0; i < neighborhoods.length; i++) { 
     setTimeout(function() { 
     addMarker(); 
     }, i * 200); 
    } 
    } 

    function addMarker() { 
    var marker = new google.maps.Marker({ 
     position: neighborhoods[iterator], 
     map: map, 
     draggable: false 
    }); 
    markers.push(marker); 

    var contentString = $("#pop"+iterator).html(); 

    var infowindow = new google.maps.InfoWindow({ 
     content: contentString, 
     maxWidth: 300, 
     maxHeight: 500 
    }); 


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

    iterator++; 
    } 

Answer 1

Sie erstellen so viele infowindow s, wie es Marker gibt. In deinem Fall denke ich, dass infowindow genug ist. Also für mit nur einem infowindow arbeiten, könnten Sie diese auf globalen Bereich implementieren:

//Using lazy initialization. 
//InfoWindow will be created only after the first call 
var getInfoWindow = (function(){ 
    var _instance = null; 
    return function(){ 
     if(_instance == null){ 
      _instance = new google.maps.InfoWindow({ 
          maxWidth: 300, 
          maxHeight: 500 
         }); 
     } 
     return _instance; 
    }; 
})(); 

Auch müssen Sie die contentString für jeden Marker speichern, die auf Klick-Ereignis angezeigt werden müssen. So ist die letzte Änderung der addMarker Methode in etwa so sein wird:

function addMarker() { 
var marker = new google.maps.Marker({ 
    position: neighborhoods[iterator], 
    map: map, 
    draggable: false 
}); 
markers.push(marker); 
//Storing content html 
marker.contentString = $("#pop"+iterator).html(); 

google.maps.event.addListener(marker, 'click', function() { 
    //Setting content of InfoWindow 
    getInfoWindow().setContent(marker.contentString); 
    //Opening 
    getInfoWindow().open(map,marker); 
}); 

iterator++; 
} 

Answer 2

Setzen Sie die var Infofenster außerhalb der addMarker Funktion. Wie folgt aus:

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

Dann in Ihrer addMarker Funktion

infowindow.setContent(contentString); 

diese Weise wird die Infofenster nur einmal erstellt werden. Ein Klick auf die verschiedenen Marker verschiebt das Fenster und setzt den Inhalt.