CODEWITHSUNDEEP
jqueryeventsgoogle-maps-api-3custom-overlay
Lukas
Lukas

Reputation: 10380

Mouseover on custom overlay in Google Maps

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?

Upvotes: 2

Views: 4700

Answers (1)

Lukas
Lukas

Reputation: 10380

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') });
}

Upvotes: 6

Related Questions