Click error on a clusterer within a Google Map

Question

I'm trying to handle the click event on a MarkerClusterer (v1.0) within a Google Map (v3) in order to zoom on the clusterer's center.

The problem

When the user clicks on a clusterer, the following error is shown:

Uncaught TypeError: Cannot read property '0' of undefined

at Cluster.getBounds (markerclusterer.js:903)

at ClusterIcon.triggerClusterClick (markerclusterer.js:1057)

at HTMLDivElement. (markerclusterer.js:1082)

Cluster.getBounds @ markerclusterer.js:903

ClusterIcon.triggerClusterClick @ markerclusterer.js:1057 (anonymous) @ markerclusterer.js:1082

This line, present in the MarkerClusterer's function getBounds(), seems bound to this bug:

for (var i = 0, marker; marker = markers[i]; i++) {

Sources

map = new google.maps.Map(document.getElementById('storemap'), {
    center: {lat: parseFloat(defaultLat), lng: parseFloat(defaultLong)},
    disableDefaultUI:false,
    fullscreenControl:false,
    streetViewControl:true,
    zoom: 8, 
    styles : mapstyles
});


mc = new MarkerClusterer(map, markers, {styles: clusterStyles});
google.maps.event.addListener(mc, 'clusterclick', function(cluster){
    map.setCenter(cluster.getCenter());
    map.setZoom(map.getZoom()+3);
});

My question

How can I fix the error when the user clicks on a clusterer ?

Answer 1

You do not need to add a custom clusterclick event on marker cluster.

Remove the clusterclick listener.

google.maps.event.addListener(mc, 'clusterclick', function(cluster){
    map.setCenter(cluster.getCenter());
    map.setZoom(map.getZoom()+3);
});

Just keep the MarkerClusterer initialization code.

mc = new MarkerClusterer(map, markers, {styles: clusterStyles});

When you click on the cluster it will automatically zoom in as well as center on the cluster. You can find the MarkerClusterer Example while illustrates the same.