Google map API v3 - Hinzufügen mehrerer Infowindows

Question

Ich habe eine arbeiten Abschnitt von Google Maps Javascript, ich hatte ein Problem.

Jetzt hatte ich das Problem, dass nur ein Infofenster auftauchte, das letzte. Ich habe eine Lösung für einen anderen Stack-Thread gefunden, der funktioniert hat. Aber ich konnte nicht wirklich herausfinden warum. Ich bin ziemlich neu in Javascript, also hoffte ich, dass mir jemand erklären könnte, was sich geändert hat und wie. Hier

ist der Arbeitscode:

function setMarkers(map, locations){ 
    for(var i = 0; i < locations.length; i++){ 
    var marker = locations[i]; 
    var latLng = new google.maps.LatLng(locations[i][1], locations[i][2]); 
    var content = locations[i][0]; 
    var infowindow = new google.maps.InfoWindow(); 

    marker = new google.maps.Marker({ 
     position:latLng, 
     map: map 
    }); 

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

Hier ist der ursprüngliche gebrochen Code war (Ich werde fügen nur das, was geändert):

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

Nun, was ich möchte wissen, wenn Sie so freundlich sein würde, ist:

1. welche Funktion hat die Rückkehr fn dienen, und

2. was tut die (content) am Ende der addListener(}(content));) tun, da soweit ich den Inhalt sehen kann bereits innerhalb der setContent Eigenschaft festgelegt wurde.

Vielen Dank!

Answer 1

nicht durchschleifen Ihre infowindow ...
Sie brauchen nur eine Instanz des infowindowObjekt.
Verschieben Sie es außerhalb der Schleife, das gleiche für Ihre Funktionen.
Innerhalb der Schleife Inhalt relativ es ist nur zuweisen auf den geklickt

var locations = [ 
 
    ["Split",  43.5148515, 16.4490835], 
 
    ["Zagreb", 45.840196, 15.9643316], 
 
    ["Dubrovnik", 42.6457256, 18.094058] 
 
]; 
 

 
function initGoogleMap(){ 
 

 
    var infowindow = new google.maps.InfoWindow(); /* SINGLE */ 
 
    var map = new google.maps.Map(document.getElementById('map-canvas'), { 
 
     zoom: 4, 
 
     center: new google.maps.LatLng(45, 15) 
 
    }); 
 
    
 
    function placeMarker(loc) { 
 
    var latLng = new google.maps.LatLng(loc[1], loc[2]); 
 
    var marker = new google.maps.Marker({ 
 
     position : latLng, 
 
     map  : map 
 
    }); 
 
    google.maps.event.addListener(marker, 'click', function(){ 
 
     infowindow.close(); // Close previously opened infowindow 
 
     infowindow.setContent("<div id='infowindow'>"+ loc[0] +"</div>"); 
 
     infowindow.open(map, marker); 
 
    }); 
 
    } 
 
    
 
    // ITERATE ALL LOCATIONS 
 
    // Don't create functions inside for loops 
 
    // therefore refer to a previously created function 
 
    // and pass your iterating location as argument value: 
 
    for(var i=0; i<locations.length; i++) { 
 
    placeMarker(locations[i]); 
 
    } 
 
    
 
} 
 
google.maps.event.addDomListener(window, 'load', initGoogleMap);

html, body, #map-canvas { 
 
    height: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
} 
 

 
#infowindow{ 
 
    padding: 10px; 
 
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script> 
 
<div id="map-canvas"></div>

Answer 2

for(int i = 0; i < locations.length; i++){ 
    var latLng = new google.maps.LatLng(locations[i][1], locations[i][2]); 
    var contentString = locations[i][0]; 

    marker = new google.maps.Marker({   
      position: latLng, 
      map: map, 
      contentString: contentString 
    }); 

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

    marker.addListener('click', function() { 
      infowindow.setContent(this.contentString); 
      infowindow.open(map, this); 
      map.setCenter(this.getPosition()); 
    }); 
} 

Dies funktioniert gut für mich

Answer 3

Aus irgendeinem Grund hatte ich Marker Objekt zu ändern und Greifen Sie auf diese Daten innerhalb der Event Lise- ner-Funktion zu.

Der Bereich der Klickereignisfunktion auf dem Marker ist das Markerobjekt.

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

for(int i = 0; i < locations.length; i++){ 
    var latLng = new google.maps.LatLng(locations[i][1], locations[i][2]); 
    var contentString = locations[i][0]; 

    marker = new google.maps.Marker({   
      position: latLng, 
      map: map, 
      contentString: contentString 
    }); 
    marker.data = locations[i]; // adds object to marker object 


    marker.addListener('click', function() { 
     // read custom data in this.data 
     infowindow.setContent("<div id='infowindow'>"+ this.data[0] +"</div>"); 

     infowindow.open(map, this); 
     map.setCenter(this.getPosition()); 
    }); 
}