infowindow와 함께 Google Maps MarkerClusterer 통합

Question

MarkerClusterer로 그룹화 된 여러 마커에 InfoWindow를 넣으려고하지만 성공하지는 않았습니다. 나는 단지 정보창이나 클러스터가있는지도 만 생성 할 수있다. 동시에 둘 다 아닙니다. 웹을 통해 검색하면

시작점은 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>