Clustering does not expand When using fitBounds with padding

[gopinath-sixt]

We are attempting to bind the marker using fitBounds (with padding) when a cluster is clicked. This is to ensure that the marker is fully visible without being cut off, hence the use of padding. However, in some cases, the bounds are not expanding when clicking on the cluster due to the padding. The padding seems to cause the cluster calculation to yield the same value, which prevents it from expanding. Could you please provide some suggestions on how to address this?

Screen.Recording.2024-10-31.at.14.37.21.mov

https://codesandbox.io/p/devbox/awesome-waterfall-clfdrv

[usefulthink]

I think there's not a lot you can do when using padding with a small screen.

The bounds of the cluster specify the region that contains all the markers within the cluster and fitBounds will set the center and zoom of the map such that the specified region falls entirely inside the viewport — minus the padding. So for a 400px wide screen and 100px padding, this will leave only 200px to fit the markers inside, which will often not be enough. I think using the padding here isn't the best choice. Or you need to use a smaller design for the detail-markers so you don't need that much padding.

In the supercluster library (running inside @googlemaps/markerclusterer), there is a method getClusterExpansionZoom(), which tells you the zoom-level at which the cluster will expand. This could be used to set the zoom-level to be at least enough to expand the cluster. But I think you'd need to use supercluster directly to be able to access those values.

Our other clustering example (https://visgl.github.io/react-google-maps/examples/custom-marker-clustering) does exactly that, maybe that could be a better fit for your needs? It needs a bit more code on your end, but it's also more performant and has fewer potential issues due to only rendering react-components that are really needed, which can help a lot with larger datasets.