javascript - Mouse over is not triggered while dragging marker Google Maps API -

in web page, trying use google map in can drag , drop markers around. problem while drag special marker, mouse on , mouse out events of other markers not triggered .

well, understand google map uses following layers: floatpane, overlaymousetarget, floatshadow, overlayimage, overlayshadow, overlaylayer, mappane,

and markers belong overlayimage layer. also, reason why mouse on , out events not triggered because draggable marker "absorbs" events never reach marker behind.

example: have markers m1, m2 , m3. marker m3 draggable. want drag m3 around , when passes on top of m1 , m2 , mouse on events of m1 , m2 triggered.

question 1: in layer draggable object belongs ? (i assume overlaymousetarget).

question 2: can change layer marker belongs ? way able modify it's z-index.

thank time.

this great case of question asking how don't need do. don't want play layers @ all, want monitor drag event , check proximity of marker being dragged other markers.

you won't want trigger events, want call functions attached events.

warning - lots of code ahead

var map = new google.maps.map(document.getelementbyid('map'),{  	zoom: 15,  	center: {lat:44.6478627,lng:-63.6116746}  });  var m1 = new google.maps.marker({  	map: map,  	position: {lat:44.6566246,lng:-63.6202576}  });    var m2 = new google.maps.marker({  	map: map,  	position: {lat:44.6566475,lng:-63.6197212}  });    var m3 = new google.maps.marker({  	draggable:true,  	map: map,  	position: {lat:44.6544724,lng:-63.6296561}  });    //some useful flags  var isdragging = false;  var hoveredmarker = null;    //a tolerance amount - how close dragging marker has to marker in order consider mouseover  //you may need play number achieve effect want  var tolerance = 30;      var methods = {    	fromlatlngtopoint: function(latlng) {  		var topright = map.getprojection().fromlatlngtopoint(map.getbounds().getnortheast());  		var bottomleft = map.getprojection().fromlatlngtopoint(map.getbounds().getsouthwest());  		var scale = math.pow(2, map.getzoom());  		var worldpoint = map.getprojection().fromlatlngtopoint(latlng);  		return new google.maps.point((worldpoint.x - bottomleft.x) * scale, (worldpoint.y - topright.y) * scale);  	},    	onstartdragging: function() {  		isdragging = true;  	},  	  	onstopdragging: function() {  		isdragging = false;  	},    	onmarkermouseover: function(marker) {  		//set hoveredmarker flag marker being hovered  		hoveredmarker = marker;  		  		if(isdragging) {  			//do here when mouse on `marker`, if dragging  			console.log('mouse on while dragging');  		}  		  		//do here when mouse on `marker`, regardless of if dragging or not  		//console.log('mouse over');  	},  	  	onmarkermouseout: function(marker) {  		//set hoveredmarker flag null  		hoveredmarker = null;  		  		if(isdragging) {  			//do here when mouse out `marker`, if dragging  			console.log('mouse out while dragging');  		}  		  		//do here when mouse out `marker`, regardless of if dragging or not  		//console.log('mouse out');  	},  	  	arepointsclose: function(latlng1,latlng2) {	  		var   			p1 = this.fromlatlngtopoint(latlng1),  			p2 = this.fromlatlngtopoint(latlng2);  			  		//if points within `tolerance` return true, otherwise, return false  		return math.abs( p2.x - p1.x ) <= tolerance && math.abs( p2.y - p1.y ) <= tolerance;  	  	},  	  	ondrag: function(e) {    		//it's unlikely you're coordinates of 	m3 ever 100% identical m1 or m2 when dragging,  		//so use maps projection convert latlngs point , allow tolerance ( see methods.arepointsclose() )  		if( methods.arepointsclose(e.latlng,m1.getposition()) ) {  			methods.onmarkermouseover(m1);  		} else if( hoveredmarker === m1 ) {  			methods.onmarkermouseout(m1);  		}  		  		  		if( methods.arepointsclose(e.latlng,m2.getposition()) ) {  			methods.onmarkermouseover(m2);  		} else if( hoveredmarker === m2 ) {  			methods.onmarkermouseout(m2);  		}  	  	}    };    google.maps.event.addlistener(m1,'mouseover',function() { methods.onmarkermouseover(m1); });  google.maps.event.addlistener(m2,'mouseover',function() { methods.onmarkermouseover(m2); });  google.maps.event.addlistener(m1,'mouseout',function() { methods.onmarkermouseout(m1); });  google.maps.event.addlistener(m2,'mouseout',function() { methods.onmarkermouseout(m2); });    google.maps.event.addlistener(m3,'dragstart',function() { methods.onstartdragging(); });  google.maps.event.addlistener(m3,'dragend',function() { methods.onstopdragging(); });    google.maps.event.addlistener(m3,'drag',function(event) { methods.ondrag(event); });

html,body { height: 100%; }  #map { height: 100%; }

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=drawing,geometry"></script>  <div id="map"></div>