Google Maps CustomMarker OverlayView click event on mobile not working

Question

I've created a CustomMarkar using google.maps.OverlayView.

I've added DomListener to it in the draw function:

google.maps.event.addDomListener(div, "click", function (event) {
    alert("div");
    google.maps.event.trigger(self, "click");
});

I've added it to floatPane

var panes = this.getPanes();
panes.floatPane.appendChild(div);

When I create a new CustomMarker I add a DomListener to it:

let overlay = new CustomMarker(
    myLatlng,
    this.map,
    options
);
google.maps.event.addDomListener(overlay, 'click', function (event) {
    alert("overlay");
});

And finally ther is a listener on the map:

google.maps.event.addListener(this.map, 'click', function (event) {
    alert("map");
});

Everything works fine on PC browser: First fires the alert(map), after it alert(div) and finally alert(overlay).

But on mobile devices only the alert(map) fires....

What is the solution to make this work on mobile devices?

Answer 1

use 'touchend' event

In your code just add touch start event listener too

google.maps.event.addDomListener(overlay, 'touchend', function (event) {
    alert("overlay");
});

This worked for me.