Google maps api. Mehrere Markierungen

Question

var cityMap = new google.maps.Map(document.getElementById('cityMap'), { 
    zoom: 12, 
}); 
var infowindow = new google.maps.InfoWindow(); 
var services = document.getElementsByClassName('s__item'); 
var marker; 
var geocoderCity = new google.maps.Geocoder(); 

for (i=0; i < services.length; i++) { 
    var address = $(services[i]).find('.s__item__address_at').text(); 
    var contentString = address; 

    geocoderCity.geocode({'address': address}, function (results, status) { 
    if (status === google.maps.GeocoderStatus.OK) { 
     center = results[0].geometry.location; 
     cityMap.setCenter(results[0].geometry.location); 

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

     google.maps.event.addListener(marker, 'click', (function(marker) { 
      return function() { 
       infowindow.setContent(contentString); 
       infowindow.open(cityMap, marker); 
      } 
     })(marker)); 
    } 
}); 
} 

In s__item__address_at Blöcke gibt es eine Adressen. Ich bekomme Standorte mit Geocodern. Dann versuche ich Infowindows auf der Karte hinzuzufügen, aber ich bekomme nur das letzte Ergebnis der Iteration. Wie kann ich es reparieren?

jsfiddle

Answer 1

Sie könnten einen clousure verwenden, um die verfügbaren var Instanz machen

function markerListener(aMap, aMarker, aContent){ 
      google.maps.event.addListener(marker, 'click', (function(marker) { 
       return function() { 
       infowindow.setContent(aContent); 
       infowindow.open(aMap, aMarker); 
       } 
      }); 
    } 

    var cityMap = new google.maps.Map(document.getElementById('cityMap'), { 
    zoom: 12, 
    }); 
    var infowindow = new google.maps.InfoWindow(); 
    var services = document.getElementsByClassName('s__item'); 
    var marker; 
    var geocoderCity = new google.maps.Geocoder(); 



    for (i=0; i < services.length; i++) { 
     var address = $(services[i]).find('.s__item__address_at').text(); 
     var contentString = address; 

     geocoderCity.geocode({'address': address}, function (results, status) { 
     if (status === google.maps.GeocoderStatus.OK) { 
      center = results[0].geometry.location; 
      cityMap.setCenter(results[0].geometry.location); 

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

      markerListener(cityMap, marker, contentString) 
     } 
    }); 

}

zum Hörer