markerClusterer on click zoom

问题:

I just added a MarkerClusterer to my google map. It works perfectly fine.

I am just wondering if there is any way of adjusting the zoom-in behaviour when the cluster is clicked. I would like to change the zoom level if possible.

Is there any way of achieving this?

Thanks

回答1:

There has been an update to the MarkerClusterer source code, allowing much easier access to the click event:

google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
    // your code here
});

where 'markerCluster' ist the MarkerCluster object. Inside the function you may also access

cluster.getCenter();
cluster.getMarkers();
cluster.getSize();

I use this to switch to a different map type, as I use a custom tile set for easier overview on lower zoom levels:

map.setCenter(cluster.getCenter()); // zoom to the cluster center
map.setMapTypeId(google.maps.MapTypeId.ROADMAP); // switch map type
map.setOptions(myMapOptions); // apply some other map options (optional)

Regards Jack

回答2:

You can do this without modifying the source code by using a listener on the clusterclick markerClusterer event:

var mcOptions = {gridSize: 40, maxZoom: 16, zoomOnClick: false, minimumClusterSize: 2};
markerClusterer = new MarkerClusterer(map, markers, mcOptions);

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

ie. I set zoomOnClick=false to have finer control of the map zooming behaviour to control the zoom amount and zoom location each click triggers.

回答3:

I modified the clusterclick event as suggested:

/**
* Triggers the clusterclick event and zoom's if the option is set.
*/
ClusterIcon.prototype.triggerClusterClick = function() {
var markerClusterer = this.cluster_.getMarkerClusterer();

// Trigger the clusterclick event.
google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster_);

if (markerClusterer.isZoomOnClick()) {
// Zoom into the cluster.
// this.map_.fitBounds(this.cluster_.getBounds());

// modified zoom in function
this.map_.setZoom(markerClusterer.getMaxZoom()+1);

 }
};

It works great! Thanks a lot

回答4:

It appears the API will only let you toggle the zoom functionality

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/docs/reference.html

So you will have to edit the source, it appears to be on line 1055

/**
 * Triggers the clusterclick event and zoom's if the option is set.
 */
ClusterIcon.prototype.triggerClusterClick = function() {
  var markerClusterer = this.cluster_.getMarkerClusterer();

  // Trigger the clusterclick event.
  google.maps.event.trigger(markerClusterer, 'clusterclick', this.cluster_);

  if (markerClusterer.isZoomOnClick()) {
    // Zoom into the cluster.
    this.map_.fitBounds(this.cluster_.getBounds());
  }
};

回答5:

If anyone needs to write this function in coffeescript I merged the top answer and the marked answer into one code snippet.

mcOptions =
  maxZoom: 16

markerCluster = new MarkerClusterer map, markers, mcOptions
# listener if a cluster is clicked
google.maps.event.addListener markerCluster, "clusterclick", (cluster) ->
  if markerCluster.isZoomOnClick() # default is true
    #get bounds of cluster
    map.fitBounds cluster.getBounds()
    #zoom in to max zoom plus one. 
    map.setZoom markerCluster.getMaxZoom() + 1

This code check is zoom on click is set. If it is zoom in to max zoom plus one, and center on the cluster. Very simple code.