Menu
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
690
I'm using Google MarkerClusterer. I'd like to decluster all the markers whenever the map goes above zoom level 15. There is a maxZoom setting in the configuration options, but the documentation does not make it clear what it is supposed to do. I have tried setting it as follows, but the map remains clustered whatever zoom level I set the map to:
Click on the cluster icon and the map bounds will zoom to the level where both markers are visible: When you zoom out a few levels, the cluster icon will return in place of the two markers once the map is at a level where they’d be likely to overlap.
markers.on('clusterclick',function(a){map.addLayer(L.polygon(a.layer.getConvexHull()));}); Zooming to the bounds of a cluster When you receive an event from a cluster you can zoom to its bounds in one easy step.
The MarkerClusterer library uses the grid-based clustering technique that divides the map into squares of a certain size (the size changes at each zoom level), and groups the markers into each square grid. It creates a cluster at a particular marker, and adds markers that are in its bounds to the cluster.
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
153
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(markerClusterer.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.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
