1

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?

Csaba Horváth
  • 41
  • 1
  • 7

1 Answers1

0

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.

Arun Wilson
  • 171
  • 2
  • 12