Mouse over is not triggered while dragging marker Google Maps API

Question

In my web page, I am trying to use google map in which i can drag and drop markers around. The problem is that while i drag a special marker, the mouse over and mouse out events of the other markers are not triggered .

Well, i understand that a Google Map uses the following layers: floatPane, overlayMouseTarget, floatShadow, overlayImage, overlayShadow, overlayLayer, mapPane,

and the markers belong to overlayImage layer. Also, the reason why the mouse over and out events are not triggered is because the draggable marker "absorbs" the events that never reach to the marker behind.

Example: I have markers m1, m2 and m3. Marker m3 is draggable. I want to drag m3 around and when it passes on top of m1 and m2 , mouse over events of m1 and m2 to be triggered.

Question 1: In which layer is the draggable object belongs ? (I assume overlayMouseTarget).

Question 2: Can i change the layer that a marker belongs ? That way i will be able to modify it's z-index.

Thank you for your time.

Answer 1

This is a great case of a question where you are asking how to do something that you don't need to do. You don't want to play with the layers at all, you want to monitor the drag event and check the proximity of the marker that is being dragged to the other markers.

You won't actually want to trigger the events , but you want to call the functions that are attached to those 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 the dragging marker has to be to another marker in order for you to consider it to be a mouseover //you may need to play with this number to achieve the effect you 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 the hoveredMarker flag to the marker that is being hovered hoveredMarker = marker; if(isDragging) { //do something here when you mouse over `marker`, only if you are also dragging console.log('mouse over while dragging'); } //do something here when you mouse over `marker`, regardless of if you are dragging or not //console.log('mouse over'); }, onMarkerMouseOut: function(marker) { //set the hoveredMarker flag to null hoveredMarker = null; if(isDragging) { //do something here when you mouse out `marker`, only if you are also dragging console.log('mouse out while dragging'); } //do something here when you mouse out `marker`, regardless of if you are dragging or not //console.log('mouse out'); }, arePointsClose: function(latLng1,latLng2) { var p1 = this.fromLatLngToPoint(latLng1), p2 = this.fromLatLngToPoint(latLng2); //if the points are 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 very unlikely that you're coordinates of m3 will ever be 100% identical to m1 or m2 when dragging, //so use the maps projection to convert to latLngs to a point and allow a 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>