Mouseover on custom overlay in Google Maps

Question

Is it possible to listen for a mouseover event on a custom overlay in Google Maps (API v3)? A quick example:

function HWPMarker(map, coords, text) { […] }
HWPMarker.prototype = new google.maps.OverlayView();
HWPMarker.prototype.draw = function() { […] }

HWPMarker.prototype.onAdd = function() {

  $(this.getPanes().overlayLayer).append(this.marker); // this.marker is a div

  // THIS IS WHERE I TRY TO LISTEN TO THE MOUSEOVER EVENT
  google.maps.event.addListener(this, 'mouseover', function(){ alert('mouseover') });

}

Am I doing something wrong? Or is it not possible to listen for mouseover on a custom overlay?

is it working or you don't get the alert. – Jai Dec 17 '12 at 11:03 — Jai, Dec 17 '12 at 11:03

score 6 · Accepted Answer · edited May 30 '17 at 10:35

This answer points out that the Maps API v3 doesn't accept mouse events anymore. So what we have to do is to add the DOM element to overlayMouseTarget and use a Google Maps DOM listener. This is how it works:

HWPMarker.prototype.onAdd = function() {
  this.getPanes().overlayMouseTarget.appendChild(this.marker); // this.marker = my dom el
  google.maps.event.addDomListener(this.marker, 'mouseover', function(){ alert('mouseover') });
}

Mouseover on custom overlay in Google Maps

1 Answers1