複数のGoogleマップマーカーに住所のコンテンツを追加

-1

マーカーのコンテンツに住所の住所を追加します。私は座標によってアドレスを取得していますが、これは動作していますが、マップ上には必ず最後のアドレスだけが表示されます。ここで複数のGoogleマップマーカーに住所のコンテンツを追加

は私のサンプルコードです：

<!DOCTYPE html> 
<html> 
<head> 
    <title>Simple Map</title> 
    <meta name="viewport" content="initial-scale=1.0"> 
    <meta charset="utf-8"> 
    <style> 
     html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 

     #map { 
      height: 400px; 
     } 

     #map_canvas { 
      width: 100%; 
      height: 100%; 
     } 
    </style> 
</head> 
<body> 
<div id="map"> 
    <div id="map_canvas" class="mapping"></div> 
</div> 
<script> 

    function initMap() { 
     var locations = [ 
      [-33.890542, 151.274856], 
      [-33.923036, 151.259052], 
     ]; 

     var styleArray = [ 
      { 
       featureType: 'all', 
       stylers: [ 
        {saturation: -80} 
       ] 
      }, { 
       featureType: 'road.arterial', 
       elementType: 'geometry', 
       stylers: [ 
        {hue: '#00ffee'}, 
        {saturation: 50} 
       ] 
      }, { 
       featureType: 'poi.business', 
       elementType: 'labels', 
       stylers: [ 
        {visibility: 'on'} 
       ] 
      } 
     ]; 

     var image = { 
      url: 'map_icon.png', 
      size: new google.maps.Size(30, 45), 
      origin: new google.maps.Point(0, 0), 
      scaledSize: new google.maps.Size(25, 35), 
     }; 

     var map = new google.maps.Map(document.getElementById('map'), { 
      scrollwheel: false, 
      zoom: 8, 
      center: new google.maps.LatLng(-33.92, 151.25), // default map position 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      styles: styleArray, 
     }); 

     var infowindow = new google.maps.InfoWindow(); 
     var geocoder = new google.maps.Geocoder(); 
     var marker, i; 
     var mapContent = ''; 

     for (i = 0; i < locations.length; i++) { 

      var latLng = new google.maps.LatLng(locations[i][0], locations[i][1]); 

      geocoder.geocode({ 
         latLng: new google.maps.LatLng(locations[i][0], locations[i][1]), 
        }, 
        function (responses) { 
         if (responses && responses.length > 0) { 
          mapContent = responses[0].formatted_address; 
         } 
        } 
      ); 

      marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(locations[i][0], locations[i][1]), 
       map: map, 
       icon: image, 
      }); 

      google.maps.event.addListener(marker, 'click', (function (marker, i) { 
       return function() { 
        infowindow.setContent(mapContent); 

        infowindow.open(map, marker); 
       } 
      })(marker, i)); 

     } 
    } 

</script> 
<script src="https://maps.googleapis.com/maps/api/js?key=KEY&callback=initMap&sensor=true"></script> 
</body> 
</html>

出典

2016-10-05 jamie

はUsing closures in event listenersに関するいくつかのドキュメントを読む：

geocoder.geocode({ 
    latLng: new google.maps.LatLng(locations[i][0], locations[i][1]), 
    }, 
    function (responses) { 
     if (responses && responses.length > 0) { 
      mapContent = responses[0].formatted_address; 
      var marker = new google.maps.Marker({ 
       position: responses[0].geometry.location, 
       map: map, 
       icon: image, 
      });  
      addContent(map, marker, mapContent, infowindow); 
     } 
    } 
); 



function addContent(map, marker, mapContent, infowindow){ 
     google.maps.event.addListener(marker, 'click', (function (marker) { 
       return function() { 
        infowindow.setContent(mapContent); 

        infowindow.open(map, marker); 
       } 
      })(marker)); 
}

JSフィドル：http://jsfiddle.net/4mtyu/2029/

完璧な作品

出典

2016-10-05 12:16:44

！ありがとう:) – jamie

複数のGoogleマップマーカーに住所のコンテンツを追加

答えて

関連する問題