How To Add Event Listener To OverlayView?

Question

I am trying to create an OverlayView on google map as a custom marker.

I was able to create successfully an OverlayView like the following.

http://plnkr.co/edit/4XDANE?p=preview

However, when I try to add event listeners to it, I got stuck.

I tried the followings with no luck.

    // ------------- Trying To Add DOM Event Listener ---
    google.maps.event.addDomListener(this.div, 'click', function(){
      alert(1); // NOT working
    })

    // ------------- Or, this ---
    this.div.addEventListener('click',function() {
      alert(1); // NOT working
    });

Anyone made this successfully?

----- update ---- As per @dr-molle suggests, the following accepts mouse click.

    //panes.overlayLayer.appendChild(div);   NOT THIS
    panes.overlayMouseTarget.appendChild(div);  // But, This

    // ------------- Trying To Add DOM Event Listener ---
    google.maps.event.addDomListener(this.div, 'click', function(){
      alert(1); // working
    })

Answer 1

You must use a different pane for the layer.

Currently you use overlayLayer , but only overlayMouseTarget and floatPane may receive DOM-events.

I would suggest to use overlayMouseTarget , your overlays would act like markers in this case(InfoWindows would be opened in front of the overlays)