Use overlayLayer and overlayMouseTarget

fixes googlemaps#506

markerclustererplus/src/markerclusterer.js

@@ -100,6 +100,7 @@ function ClusterIcon(cluster, styles) {
   this.styles_ = styles;
   this.center_ = null;
   this.div_ = null;
+  this.eventDiv_ = null;
   this.sums_ = null;
   this.visible_ = false;
 
@@ -120,31 +121,37 @@ ClusterIcon.prototype.onAdd = function () {
 
   this.div_ = document.createElement("div");
   this.div_.className = this.className_;
+  this.eventDiv_ = this.div_.cloneNode();
+  this.eventDiv_.className += ' event';
+
   if (this.visible_) {
     this.show();
   }
 
-  this.getPanes().overlayMouseTarget.appendChild(this.div_);
+  var panes = this.getPanes();
+
+  panes.overlayLayer.appendChild(this.div_)
+  panes.overlayMouseTarget.appendChild(this.eventDiv_);
 
   // Fix for Issue 157
   this.boundsChangedListener_ = google.maps.event.addListener(this.getMap(), "bounds_changed", function () {
     cDraggingMapByCluster = cMouseDownInCluster;
   });
 
-  google.maps.event.addDomListener(this.div_, "mousedown", function () {
+  google.maps.event.addDomListener(this.eventDiv_, "mousedown", function () {
     cMouseDownInCluster = true;
     cDraggingMapByCluster = false;
   });
 
 // March 1, 2018: Fix for this 3.32 exp bug, https://issuetracker.google.com/issues/73571522
 // But it doesn't work with earlier releases so do a version check.
   if (gmVersion >= 332) { // Ugly version-dependent code
-    google.maps.event.addDomListener(this.div_, "touchstart", function (e) {
+    google.maps.event.addDomListener(this.eventDiv_, "touchstart", function (e) {
       e.stopPropagation();
     });
   }
 
-  google.maps.event.addDomListener(this.div_, "click", function (e) {
+  google.maps.event.addDomListener(this.eventDiv_, "click", function (e) {
     cMouseDownInCluster = false;
     if (!cDraggingMapByCluster) {
       var theBounds;
@@ -184,7 +191,7 @@ ClusterIcon.prototype.onAdd = function () {
     }
   });
 
-  google.maps.event.addDomListener(this.div_, "mouseover", function () {
+  google.maps.event.addDomListener(this.eventDiv_, "mouseover", function () {
     var mc = cClusterIcon.cluster_.getMarkerClusterer();
     /**
      * This event is fired when the mouse moves over a cluster marker.
@@ -195,7 +202,7 @@ ClusterIcon.prototype.onAdd = function () {
     google.maps.event.trigger(mc, "mouseover", cClusterIcon.cluster_);
   });
 
-  google.maps.event.addDomListener(this.div_, "mouseout", function () {
+  google.maps.event.addDomListener(this.eventDiv_, "mouseout", function () {
     var mc = cClusterIcon.cluster_.getMarkerClusterer();
     /**
      * This event is fired when the mouse moves out of a cluster marker.
@@ -215,13 +222,14 @@ ClusterIcon.prototype.onRemove = function () {
   if (this.div_ && this.div_.parentNode) {
     this.hide();
     google.maps.event.removeListener(this.boundsChangedListener_);
-    google.maps.event.clearInstanceListeners(this.div_);
+    google.maps.event.clearInstanceListeners(this.eventDiv_);
     this.div_.parentNode.removeChild(this.div_);
+    this.eventDiv_.parentNode.removeChild(this.eventDiv_);
     this.div_ = null;
+    this.eventDiv_ = null;
   }
 };
 
-
 /**
  * Draws the icon.
  */
@@ -231,6 +239,8 @@ ClusterIcon.prototype.draw = function () {
     this.div_.style.top = pos.y + "px";
     this.div_.style.left = pos.x + "px";
     this.div_.style.zIndex = google.maps.Marker.MAX_ZINDEX + 1; // Put above all unclustered markers
+
+    this.syncDivStyle();
   }
 };
 
@@ -241,7 +251,9 @@ ClusterIcon.prototype.draw = function () {
 ClusterIcon.prototype.hide = function () {
   if (this.div_) {
     this.div_.style.display = "none";
+    this.syncDivStyle();
   }
+
   this.visible_ = false;
 };
 
@@ -286,6 +298,10 @@ ClusterIcon.prototype.show = function () {
       this.div_.title = this.sums_.title;
     }
     this.div_.style.display = "";
+
+    this.syncDivStyle({
+      title: this.div_.title,
+    });
   }
   this.visible_ = true;
 };
@@ -361,6 +377,18 @@ ClusterIcon.prototype.getPosFromLatLng_ = function (latlng) {
   return pos;
 };
 
+/**
+ * Sync the eventDiv_ size and position with the display div_
+ */
+ClusterIcon.prototype.syncDivStyle = function (vars) {
+  if (vars) {
+    Object.assign(this.eventDiv_, vars);
+  }
+  if (this.eventDiv_ && this.div_) {
+    this.eventDiv_.style.cssText = this.div_.style.cssText;
+  }
+}
+
 
 /**
  * Creates a single cluster that manages a group of proximate markers.