Google지도 api. 다중 마커

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)); 
    } 
}); 
} 

s__item__address_at 블록에는 주소가 있습니다. 지오 코더를 사용하여 위치를 얻습니다. 그런 다음지도에 정보창을 추가하려고하지만 마지막 결과 만 얻습니다. 어떻게 해결할 수 있습니까? 사용할 수있는 VAR 인스턴스를 만들기 위해

jsfiddle

Answer 1

당신은

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) 
     } 
    }); 

}

을 리스너하는 clousure을 사용할 수 있습니다