MarkerClustererPlus does not exec click on cluster on some aspect ratios

[markusguenther]

Like the old library the current one has the problem that on some aspect ratios of the map the click handler on a cluster does not zoom in.

https://github.com/googlemaps/js-marker-clusterer/issues/135

The is reproduceable in the examples. When you define a small height for the canvas like 200 pixels or so. In my page it does not work for a width of 850 px and a height of 250 pixels. When I use a height of 500 pixels everything is fine.

[garylittleRLP]

This may have something to do with fitBounds, not sure.

I'll try to take a look into this, but in the meantime, you can experiment yourself by turning off the default click handler (by setting the zoomOnClick property to false), then providing a custom click handler for the markerclusterer.

The default hander looks like this (mc is the markerclusterer object and cClusterIcon.cluster_ is passed to the click event handler:

    // Zoom into the cluster.
    mz = mc.getMaxZoom();
    theBounds = cClusterIcon.cluster_.getBounds();
    mc.getMap().fitBounds(theBounds);
    // There is a fix for Issue 170 here:
    setTimeout(function () {
      mc.getMap().fitBounds(theBounds);
      // Don't zoom beyond the max zoom level
      if (mz !== null && (mc.getMap().getZoom() > mz)) {
        mc.getMap().setZoom(mz + 1);
      }
    }, 100);

[markusguenther]

Thank you for the fast response. In my case I now handle it like that.

if (mc.getZoomOnClick()) {
          // Zoom into the cluster.
          mz = mc.getMaxZoom();
          currentZoom = mc.getMap().getZoom();
          theBounds = cClusterIcon.cluster_.getBounds();

          mc.getMap().fitBounds(theBounds);
          // There is a fix for Issue 170 here:
          setTimeout(function () {
            mc.getMap().fitBounds(theBounds);
            mc.getMap().setZoom(currentZoom + 1);
            // Don't zoom beyond the max zoom level
            if (mz !== null && (currentZoom > mz)) {
              mc.getMap().setZoom(mz + 1);
            }
          }, 100);
        }

This is actually OK for me. So I always zoom in one level. But guess it is not the right approach for the framework.

[garylittleRLP]

I took a look at your code and came up with the following solution; let me know if this works for you:

google.maps.event.addDomListener(this.div_, "click", function (e) { cMouseDownInCluster = false; if (!cDraggingMapByCluster) { var theBounds; var mz; var originalZoom; var mc = cClusterIcon.cluster_.getMarkerClusterer(); /** * This event is fired when a cluster marker is clicked. * @name MarkerClusterer#click * @param {Cluster} c The cluster that was clicked. * @event */ google.maps.event.trigger(mc, "click", cClusterIcon.cluster_); google.maps.event.trigger(mc, "clusterclick", cClusterIcon.cluster_); // deprecated name

  // The default click handler follows. Disable it by setting
  // the zoomOnClick property to false.
  if (mc.getZoomOnClick()) {
    // Zoom into the cluster.
    mz = mc.getMaxZoom();
    originalZoom = mc.getMap().getZoom();
    theBounds = cClusterIcon.cluster_.getBounds();
    mc.getMap().fitBounds(theBounds);
    // There is a fix for Issue 170 here.
    // Also fixes https://github.com/googlemaps/v3-utility-library/issues/437
    setTimeout(function () {
      var currentZoom = mc.getMap().getZoom();
      currentZoom = Math.max(currentZoom, originalZoom + 1);
      // Don't zoom beyond the max zoom level if maxZoom specified
      // or ensure we zoom at least one level over original zoom level. 
      var newZoom = (mz !== null && (currentZoom > mz) ? mz + 1 : currentZoom);
      mc.getMap().setZoom(newZoom);
    }, 100);
  }

[sme12]

@garylittleRLP Thank you for the solution. I have the same issue and the solution works perfectly for me.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. Please comment here if it is still valid so that we can reprioritize. Thank you!

[stale[bot]]

Closing this. Please reopen if you believe it should be addressed. Thank you for your contribution.

[ghost]

@googlebot don't do it!

[ghost]

@jpoehnelt I would say it kinda a fix: https://github.com/googlemaps/v3-utility-library/issues/437#issuecomment-400036752

But main problem somewhere inside of mc.getMap().fitBounds(theBounds);

[harrington101]

I'm experiencing this using jquery. When I am zoomed to 6 and have a map.getBounds response of: Ta: Od {g: -103.03975325864822, i: -70.21504563135177} Ya: Sd {g: 27.57120869496215, i: 37.54859079766271} My marker cluster size is 123 but the number doesn't really seem to make much of a difference. It only seems to happen when the map programmatically zooms to that zoom level and I can zoom out and in again and, while the markers are now redrawn as two different clusters, it works.

[jmartsch]

This bug still exists and should be fixed. I disabled zoomOnClick and added following modified the code from @garylittleRLP as a custom event handler, but this fix should be made in the package rather than in a custom handler.

google.maps.event.addListener(markerCluster, 'click', e => {
    /**
     * This event is fired when a cluster marker is clicked.
     * @name MarkerClusterer#click
     * @param {Cluster} e The cluster that was clicked.
     * @event
     */
    // console.log(c);
    google.maps.event.trigger(e, 'click', e.markerClusterer_);
    google.maps.event.trigger(e, 'clusterclick', e.markerClusterer_); // deprecated name
    // The default click handler follows. Disable it by setting
    // the zoomOnClick property to false.
    // if (e.getZoomOnClick()) {
    // Zoom into the cluster.
    const mz = e.markerClusterer_.getMaxZoom();
    const originalZoom = map.getZoom();
    const theBounds = e.getBounds();
    map.fitBounds(theBounds);
    // Fixes #437
    setTimeout(function () {
      map.fitBounds(theBounds); // this fixes an issue on iOS #170
      let currentZoom = map.getZoom();
      currentZoom = Math.max(currentZoom, originalZoom + 1);
      // Don't zoom beyond the max zoom level if maxZoom specified
      // or ensure we zoom at least one level over original zoom level.
      let newZoom = (mz !== null && (currentZoom > mz) ? mz + 1 : currentZoom);
      map.setZoom(newZoom);
    }, 100);
    // }
    // Prevent event propagation to the map:
    e.cancelBubble = true;
    if (e.stopPropagation) {
      e.stopPropagation();
    }
  });

[jmartsch]

The bug occured on small resolutions, namely 375px width, and only on one marker (or some, I don't know). Here is a screenshot of the map. The bug occured when I was clicking on the 72 located at the city of Düsseldorf.

The map dimensions are 375 x 300 on this resolution.

[harrington101]

For me it is happening on a desktop resolution so it seems to be resolution independent.

[ghost]

For me it is happening on a desktop resolution so it seems to be resolution independent.

It depends to size of gmap element (as mention in the top post)