마크 머터 클러스터에서 Google지도 아이콘을 클릭하면 데이터 표시

Question

Google지도 markerclusterer 아이콘을 클릭했을 때 사용자 설정 데이터를 표시하는 방법을 알아 내려고했지만 어디에서도 찾을 수 없습니다.

내 markerclusterer 코드는 다음과 같이 보이지만 마커 클릭 이벤트를 캡처에서 내 시도가 작동하지 않습니다 :

var markerClusterer = null; 
var map = null; 
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' + 
    'chco=FFFFFF,008CFF,000000&ext=.png'; 
google.maps.event.addDomListener(window, 'load', initialize); 

function refreshMap() { 
    if (markerClusterer) { 
     markerClusterer.clearMarkers(); 
    } 
    var markers = []; 
    var markerImage = new google.maps.MarkerImage(imageUrl, 
     new google.maps.Size(24, 32)); 
     /* 
    for (var i = 0; i < 1000; ++i) { 
     var latLng = new google.maps.LatLng(data.photos[i].latitude, 
      data.photos[i].longitude) 
     var marker = new google.maps.Marker({ 
     position: latLng, 
     icon: markerImage 
     }); 
     markers.push(marker); 
    } 
    */ 
    for (var i = 0; i < numItemsToShow; ++i) { 
     var latLng = new google.maps.LatLng(itemsToShow[i].lat, itemsToShow[i].long); 
     var marker = new google.maps.Marker({ 
     position: latLng, 
     icon: markerImage 
     }); 
     markers.push(marker); 
    } 
    var zoom = parseInt(document.getElementById('zoom').value, 10); 
    var size = parseInt(document.getElementById('size').value, 10); 
    var style = parseInt(document.getElementById('style').value, 10); 
    zoom = zoom == -1 ? null : zoom; 
    size = size == -1 ? null : size; 
    style = style == -1 ? null: style; 


    markerClusterer = new MarkerClusterer(map, markers, { 
     maxZoom: zoom, 
     gridSize: size, 
     styles: styles[style] 
    }); 
} 

function initialize() { 
    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 2, 
     center: new google.maps.LatLng(39.91, 116.38), 
     mapTypeId: google.maps.MapTypeId.ROADMAP, 
     //styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"administrative.land_parcel","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"landscape.natural","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"on"},{"color":"#052366"},{"saturation":"-70"},{"lightness":"85"}]},{"featureType":"poi","elementType":"geometry.fill","stylers":[{"saturation":"-100"},{"lightness":"0"}]},{"featureType":"poi","elementType":"labels","stylers":[{"visibility":"simplified"},{"lightness":"-53"},{"weight":"1.00"},{"gamma":"0.98"}]},{"featureType":"poi","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"poi","elementType":"labels.icon","stylers":[{"visibility":"off"},{"lightness":"0"}]},{"featureType":"poi.park","elementType":"geometry.fill","stylers":[{"hue":"#3dff00"},{"saturation":"-100"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45},{"visibility":"on"}]},{"featureType":"road","elementType":"geometry","stylers":[{"saturation":"-18"}]},{"featureType":"road","elementType":"labels","stylers":[{"visibility":"off"}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"road.local","elementType":"all","stylers":[{"visibility":"on"}]},{"featureType":"road.local","elementType":"labels.text","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#57677a"},{"visibility":"on"}]},{"featureType":"water","elementType":"geometry.fill","stylers":[{"lightness":"40"}]}] 
     styles: [{"featureType":"water","stylers":[{"visibility":"on"},{"color":"#b5cbe4"}]}, 
      {"featureType":"landscape","stylers":[{"color":"#efefef"}]}, 
      {"featureType":"road.highway","elementType":"geometry","stylers":[{"color":"#83a5b0"}]}, 
      {"featureType":"road.arterial","elementType":"geometry","stylers":[{"color":"#bdcdd3"}]}, 
      {"featureType":"road.local","elementType":"geometry","stylers":[{"color":"#ffffff"}]}, 
      {"featureType":"poi.park","elementType":"geometry","stylers":[{"color":"#e3eed3"}]}, 
      {"featureType":"administrative","stylers":[{"visibility":"on"},{"lightness":33}]}, 
      {"featureType":"road"}, 
      {"featureType":"poi.park","elementType":"labels","stylers":[{"visibility":"on"},{"lightness":20}]},{}, 
      {"featureType":"road","stylers":[{"lightness":20}]}] 
    }); 
    var refresh = document.getElementById('refresh'); 
    google.maps.event.addDomListener(refresh, 'click', refreshMap); 
    var clear = document.getElementById('clear'); 
    google.maps.event.addDomListener(clear, 'click', clearClusters); 

    google.maps.event.addListener(markerClusterer, 'click', function() { 
     // do something with this marker ... 
     this.setTitle('I am clicked'); 
    }); 

    refreshMap(); 
} 

function clearClusters(e) { 
    e.preventDefault(); 
    e.stopPropagation(); 
    markerClusterer.clearMarkers(); 
} 

Answer 1

이 날 (클러스터 아이콘을 마우스를 움직일 때 경우는, 정보창을 엽니 작동 클러스터 아이콘을 클릭하면 기본적으로 클러스터 경계로 확대/축소되어 클러스터 아이콘의 툴팁/제목이 변경되는 것을 볼 수 있습니다.

var infoWindow = new google.maps.InfoWindow(); 
google.maps.event.addListener(markerClusterer, 'mouseover', function (cluster) { 
    // do something with this cluster ... 
    infoWindow.setContent("Mouseover<br>"+cluster.getCenter().toUrlValue()); 
    infoWindow.setPosition(cluster.getCenter()); 
    infoWindow.open(map); 
});