Make custom overlay clickable (Google Maps API v3)

Question

I have a custom overlay class (ImageOverlay) which inherits from google.maps.OverlayView. I want it to respond to Google Maps click events (not just DOM click events) but simply using addListener doesn't seem to do the trick.

e.g. I have a shapes array which contains a mixture of google.maps.Polygon and ImageOverlay objects:

for (var i in shapes) {   google.maps.event.addListener(shapes[i], 'click', function(){alert('hi')}); } 

Clicking on the polygons triggers an alert but clicking on the custom overlays does nothing.

How do I make Google Maps API treat the overlays as clickable?

Answer 1

Update for v3: overlayLayer doesn't accept mouse events anymore. Add your overlay to overlayMouseTarget instead, add the listener, and it should receive mouse events normally.

//add element to clickable layer  this.getPanes().overlayMouseTarget.appendChild(div);  // set this as locally scoped var so event does not get confused var me = this;  // Add a listener - we'll accept clicks anywhere on this div, but you may want // to validate the click i.e. verify it occurred in some portion of your overlay. google.maps.event.addDomListener(div, 'click', function() {     google.maps.event.trigger(me, 'click'); }); 

See: http://code.google.com/apis/maps/documentation/javascript/reference.html#MapPanes

Answer 2

The Maps API can't automatically determine which portions of your overlay should be clickable (i.e. if you render an image with a transparent background, if would be up to your overlay class to determine whether clicks in the transparent region count as valid clicks or not).

You should add DOM listeners to the overlays you draw, and then trigger your own Maps API click event if this is a valid click.

Example:

FooBar.prototype.onAdd = function() {   // Create a div and append it to a map pane.    var div = document.createElement('div');   div.style = "height: 100px; width: 100px";   this.getPanes().overlayLayer.appendChild(div);    // set this as locally scoped var so event does not get confused   var me = this;    // Add a listener - we'll accept clicks anywhere on this div, but you may want   // to validate the click i.e. verify it occurred in some portion of your overlay.   google.maps.event.addDomListener(div, 'click', function() {     google.maps.event.trigger(me, 'click');   });    // Position your overlay etc. }