Cluster Not Expanding After Marker Click with Advanced Markers

[hkshetry]

Google Maps JavaScript API: Advanced Markers cluster grouping not working after migration

---

Environment details

1. Google Maps JavaScript API: Advanced Markers - Cluster grouping behavior issue
2. OS type and version: Not specified (web-based issue)
3. Library version: Google Maps JavaScript API with Advanced Markers, Supercluster with radius 140

Steps to reproduce

1. Migrate from standard markers to Advanced Markers in Google Maps JavaScript API
2. Set up map with height of 350px
3. Configure Supercluster with radius of 140
4. Load markers that form clusters
5. Click on a cluster (specifically the "14" cluster in Springfield, Illinois in the provided example)
6. Observe that the cluster does not break apart or expand as expected

Code example

// JSFiddle reproduction: https://jsfiddle.net/ro5wnj6m/4/
// Map configuration with Advanced Markers and Supercluster
// Map height: 350px
// Supercluster radius: 140
// Issue: Clicking cluster "14" in Springfield, Illinois does not expand/break apart

[bdcoder2]

The "problem" may be that the bounds of the cluster (all the markers within the cluster) already fit within the map bounds, so the default onClusterClickHandler simply calls "map.fitBounds" which does not cause the map to "zoom in", in this case.

You will probably need to define and call your own custom onClusterClickHandler, ie:

function myClusterClickHandler( event, cluster, map ) {

  var b = map.getBounds();

  var ne = cluster.bounds.getNorthEast();

  var sw = cluster.bounds.getSouthWest();

  if ( b.contains( ne ) && b.contains( sw ) ) {

     // All markers within the cluster already fit within the map bounds, so zoom in ...

     var z = map.getZoom() + 1;

     map.setZoom( z );

  }
  else {

     map.fitBounds( cluster.bounds );

  }

};

Author of: grid_clusterer