Google maps marker clusterer zooms in with page jump on click

0
votes

This is an issue in the google documentation for marker clusterer as well as my code and I've been requested to fix the zoom jump to a smooth transition zoom while also centering. You can see in the google link occasionally it will smooth zoom but on certain aspect ratios it will jump to the zoom level upon click to decluster.

I've tried changing MarkerClusterer to MarkerClustererPlus and that didn't seem to resolve the issue. I also tried an event listener on the cluster click to slowly add increments of zooms but seems to not work either even with zoomOnClick set to false.

    google.maps.event.addListener(markerClusterer, "clusterclick", function (cluster) {
  let center = cluster.getCenter();
  map.panTo(center.latLng);
  smoothZoom(map, 10, map.getZoom(), center);
})


    function smoothZoom(map: google.maps.Map, markerZoom: number, cnt: number) {
  if (cnt ? cnt >= markerZoom : null) {
    return;
  } else {
    let z = google.maps.event.addListener(map, "zoom_changed", function (event) {
      google.maps.event.removeListener(z);
      smoothZoom(map, markerZoom, cnt ? cnt + 1 : cnt);
    });

    setTimeout(function () {
      map.setZoom(cnt ? cnt : 0);
    }, 80);
  }
}

Just a side note: this is my first ever question on stackoverflow so please bare with me.

javascriptreactjsgoogle-mapsmarkerclusterer