MarkerClustererPlus: Zoom into cluster bounds when dragging map

[GoogleCodeExporter]

Dragging a map using the mouse does not work propperly, when user starts the 
drag by clicking at a cluster marker. Dragging the map works fine first, but 
when the user releases the mouse button, a click event is fired by the google 
maps api which then results into the zoom action defined in 
ClusterIcon.prototype.onAdd.

Apparently there exists no drag-event as we need it for overlays in GM3. So 
starting a drag by clicking on an overlay, dragging and releasing the mouse 
(still over the overlay) is interpreted as a single click.

Solution/Workaround:
I created a workaround which registers for bounds-changed events on the map and 
only executes the click action, if there was no bounds-changed-event between 
mousedown and mouseup.
Here is the modified onAdd-Method:

ClusterIcon.prototype.onAdd = function () {
  var cClusterIcon = this,
      mouseDown,
      boundsChanged;

  this.div_ = document.createElement("div");
  if (this.visible_) {
    this.show();
  }

  this.getPanes().overlayMouseTarget.appendChild(this.div_);

  /*
   * Detect, when the map is dragged.
   */
  google.maps.event.addListener(this.getMap(), 'bounds_changed', function() {
    boundsChanged = mouseDown;
  });
  google.maps.event.addDomListener(this.div_, "mousedown", function () {
    boundsChanged = false;
    mouseDown = true;
  });
  google.maps.event.addDomListener(this.div_, 'mouseup', function(e) {
    mouseDown = false;
    if (!boundsChanged) {
        var mz;
        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();
            mc.getMap().fitBounds(cClusterIcon.cluster_.getBounds());
            // Don't zoom beyond the max zoom level
            if (mz !== null && (mc.getMap().getZoom() > mz)) {
                mc.getMap().setZoom(mz + 1);
            }
        }
    }
  });

  google.maps.event.addDomListener(this.div_, "mouseover", function () {
    var mc = cClusterIcon.cluster_.getMarkerClusterer();
    /**
     * This event is fired when the mouse moves over a cluster marker.
     * @name MarkerClusterer#mouseover
     * @param {Cluster} c The cluster that the mouse moved over.
     * @event
     */
    google.maps.event.trigger(mc, "mouseover", cClusterIcon.cluster_);
  });

  google.maps.event.addDomListener(this.div_, "mouseout", function () {
    var mc = cClusterIcon.cluster_.getMarkerClusterer();
    /**
     * This event is fired when the mouse moves out of a cluster marker.
     * @name MarkerClusterer#mouseout
     * @param {Cluster} c The cluster that the mouse moved out of.
     * @event
     */
    google.maps.event.trigger(mc, "mouseout", cClusterIcon.cluster_);
  });
};

Original issue reported on code.google.com by gbliso...@gmail.com on 2 Feb 2012 at 9:16

[GoogleCodeExporter]

Nice catch, I will upload a v2.0.8 MarkerClustererPlus fix to the trunk in a 
moment.

Original comment by garylitt...@gmail.com on 10 Feb 2012 at 7:44

• Changed state: Confirmed

[GoogleCodeExporter]

Great!

Andr� Lison
GB General Bytes GmbH
www.general-bytes.com
www.arrlee.eu

On Fri, Feb 10, 2012 at 8:45 AM, <
google-maps-utility-library-v3@googlecode.com> wrote:

Original comment by gbliso...@gmail.com on 12 Feb 2012 at 10:08

[GoogleCodeExporter]

The 2.0.8 release has now been tagged and incorporates this fix.

Original comment by garylitt...@gmail.com on 12 Feb 2012 at 4:46

• Changed state: Fixed