2015-05-03 1 views
10

Ich habe eine arbeiten Abschnitt von Google Maps Javascript, ich hatte ein Problem.Google map API v3 - Hinzufügen mehrerer Infowindows

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!

+0

Vielen Dank für die Bearbeitung, viel einfacher auf die Augen. Stack-Formatierung ist mir noch ein bisschen neu. – Russ

+1

Vielleicht möchten Sie den Titel Ihrer Frage ändern, es sieht zu allgemein aus. – filipvkovic

Antwort

25

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>

+2

Mein Gott, es ist so viel einfacher so, danke – Russ

+0

hat nicht für mich funktioniert, aber das tat. Ich habe dem Markerobjekt "marker.loc = loc;" einen Ort hinzugefügt. und dann greifen Sie darauf als "this.loc [0]" innerhalb der addListener-Funktion zu. addListener func scope ist ein marker-Objekt. – dux

+1

Arbeitete wie ein Charme. Danke, dass du mir etwas Zeit gespart hast. – Maximus

11
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

+0

Das funktioniert für mich. In der Tat eine große Problemumgehung. :-) Gute Arbeit Johan. – LearningROR

1

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