infowindowを使ってGoogle Maps MarkerClustererを統合する

Question

私は、InfoWindowをMarkerClustererでグループ化された複数のマーカーに配置しようとしていますが、成功しません。私は、情報ウィンドウまたはクラスタを持つマップを生成することしかできません。同時に両方ではありません。ウェブ上で私はより多くの混乱になり検索....

開始点がgoogle developers pageだった：私のニーズに合わせて、私は次のコードを作成しました：

<div id="map"></div> 
    <script> 

     function initMap() { 

     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 5, 
      center: {lat: -15.7942357, lng: -47.8821945} 
     }); 

     // Add some markers to the map. 
     // Note: The code uses the JavaScript Array.prototype.map() method to 
     // create an array of markers based on a given "locations" array. 
     // The map() method here has nothing to do with the Google Maps API. 
     var markers = locations.map(function(location, i) { 
      return new google.maps.Marker({ 
      position: location, 
      }); 
     }); 

     // Add a marker clusterer to manage the markers. 
     var markerCluster = new MarkerClusterer(map, markers, 
      {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}); 
     } 
     var locations = [ 
    {lat: -19.9286,  lng: -43.93888}, 
    {lat: -19.85758, lng: -43.9668}, 
    {lat: -18.24587, lng: -43.59613}, 
    {lat: -20.46427, lng: -45.42629}, 
    {lat: -20.37817, lng: -43.41641}, 
    {lat: -20.09749, lng: -43.48831}, 
    {lat: -21.13594, lng: -44.26132}, 
     ] 
    </script> 
    <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"> 
    </script> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?callback=initMap"> 
    </script> 

その後、私はここで立ち止まりました。 InfoWindowに示されたコードは、 "場所"よりも別のオブジェクトを呼び出します。私が試した以上に最悪の結果は...

私は各マーカーに単純な情報を追加したい：マーカーごとにタイトルと固有のウェブリンクのみを追加する。

誰かが助けることができますか？

Answer 1

各マーカーの「固有情報」を場所配列に追加します（この質問に対する回答など）。

各マーカーにクリックリスナーを追加すると、その固有のコンテンツを持つInfoWindowが開きます。

var infoWin = new google.maps.InfoWindow(); 
var markers = locations.map(function(location, i) { 
    var marker = new google.maps.Marker({ 
    position: location 
    }); 
    google.maps.event.addListener(marker, 'click', function(evt) { 
    infoWin.setContent(location.info); 
    infoWin.open(map, marker); 
    }) 
    return marker; 
}); 

proof of concept fiddle

コードスニペット：

function initMap() { 
 

 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 5, 
 
    center: { 
 
     lat: -15.7942357, 
 
     lng: -47.8821945 
 
    } 
 
    }); 
 
    var infoWin = new google.maps.InfoWindow(); 
 
    // Add some markers to the map. 
 
    // Note: The code uses the JavaScript Array.prototype.map() method to 
 
    // create an array of markers based on a given "locations" array. 
 
    // The map() method here has nothing to do with the Google Maps API. 
 
    var markers = locations.map(function(location, i) { 
 
    var marker = new google.maps.Marker({ 
 
     position: location 
 
    }); 
 
    google.maps.event.addListener(marker, 'click', function(evt) { 
 
     infoWin.setContent(location.info); 
 
     infoWin.open(map, marker); 
 
    }) 
 
    return marker; 
 
    }); 
 

 
    // Add a marker clusterer to manage the markers. 
 
    var markerCluster = new MarkerClusterer(map, markers, { 
 
    imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m' 
 
    }); 
 

 
} 
 
var locations = [{ 
 
    lat: -19.9286, 
 
    lng: -43.93888, 
 
    info: "marker 1" 
 
}, { 
 
    lat: -19.85758, 
 
    lng: -43.9668, 
 
    info: "marker 2" 
 
}, { 
 
    lat: -18.24587, 
 
    lng: -43.59613, 
 
    info: "marker 3" 
 
}, { 
 
    lat: -20.46427, 
 
    lng: -45.42629, 
 
    info: "marker 4" 
 
}, { 
 
    lat: -20.37817, 
 
    lng: -43.41641, 
 
    info: "marker 5" 
 
}, { 
 
    lat: -20.09749, 
 
    lng: -43.48831, 
 
    info: "marker 6" 
 
}, { 
 
    lat: -21.13594, 
 
    lng: -44.26132, 
 
    info: "marker 7" 
 
}, ]; 
 

 
google.maps.event.addDomListener(window, "load", initMap);

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

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> 
 
<div id="map"></div>