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.

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

Not sure, but are you trying to achieve something like this - http://humaan.com/custom-html-markers-google-maps/? — Anand G, Aug 25 '15 at 09:26

score 3 · Accepted Answer · answered Aug 25 '15 at 09:24

3

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)

answered Aug 25 '15 at 09:24

Dr.Molle

116,463
16
195
201

`InfoWindows would be opened in front of the overlays`. I don't understand this though. – allenhwkim Aug 25 '15 at 19:12
let's assume there are infoWindows that will be opened on the map(custom InfoWindows implemented by yourself or built-in infowindows, e.g. when a user clicks on a POI)...they would always cover your custom overlays. – Dr.Molle Aug 25 '15 at 19:52

How To Add Event Listener To OverlayView?

1 Answers1