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.

googlearchive/js-marker-clusterer#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]

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]

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

@googlebot don't do it!