Google Maps Javascript API draggable markers don't trigger neither "click" nor "gmp-click" event on touch devices

Question

As I have written in the title, I am dealing with Google Maps Javascript API. In particular I am using the last released Advanced Markers for their customization capabilities.
These elements can be set to be draggable (by declaring the appropriate property in their option literal object) and support both the "click" and the "gmp-click" event, as stated in the official documentation (https://developers.google.com/maps/documentation/javascript/reference/advanced-markers?hl=en).
Now, I am experiencing this issue when I try to use my map on a touch enabled device: if a marker is set to be draggable, either the "click" or the "gmp-click" events aren't triggered (or seem to be not triggered)

I have seen there is already another similar question to my one, i.e. this one

Javascript Google Maps API draggable marker click through

anyway, instead having the click event that "pass through" the marker, my draggable markers seem not triggering any event at all. As a matter of fact I attached a click event to the markers that opens an Infowindow and pan the map to the marer position. I also attached a click event to the map as well, that alerts the latitude and longitude of the clicked position. When I click both on the map and a "fixed" marker I get the correct behaviour, but when I click on a draggable marker, nothing happens (so the click event is not passed to the map).

Here are some code snippet of what I did:

<div id="map">

<script>

    const { Map, InfoWindow } = await google.maps.importLibrary("maps");
    const {AdvancedMarkerElement} = await google.maps.importLibrary("marker");

    let map = new Map(document.getElementById("map");

    map.addListener("click", (mapsMouseEvent) => {
        alert(mapsMouseEvent.latLng.toJSON());
    });

    const markerPositions = [
       {
            position: new google.maps.LatLng(-33.91721, 151.2263),
            draggable: false,
       },
       {
            position: new google.maps.LatLng(-33.91539, 151.2282),
            draggable: true,
    }];
      
    let markers = [];

    for (let i = 0; i < markerPositions.length; i++) {
        const marker = new AdvancedMarkerElement({
                            map: map,
                            position: markerPositions[i].position
                            gmpDraggable: markerPositions[i].draggable ? true : false;
        });
         
          
        marker.addEventListener("gmp-click", () => {
              
            const infowindow = new google.maps.InfoWindow ({
                                   content: "This marker has been clicked",
            });
            infowindow.open({
                anchor: marker,
                map: map,      
            });
            map.panTo(marker.position);
              
        });
        markers.push(marker);

    }

</script>

Here, the first marker works fine both on desktop and mobile (touch enabled) devices, while the second one (the draggable marker) can't trigger any event and action.

So, does anyone have any idea on how to make the draggable marker able to trigger click event on touch enabled devices? Thank you!

Answer 1

Ok, I think I have found a possible solution.

After reading this

Google Maps AdvancedMarker hover listener function not working

I have added an event listener to the content of the marker when the device is "touch-enabled". Furthermore (read my comment in the above post), I check if the marker is draggable or not (it seems that the "trick" to attach the event listener to the marker content works just if the marker is set to be draggable).
In particular I have attached a "touchstart" event to the draggable markers when the device is touch-enabled.
This seems working pretty well on my phone.

Here is how I edited my code:

function isTouchDevice() {
    return (('ontouchstart' in window) ||
            (navigator.maxTouchPoints > 0) ||
            (navigator.msMaxTouchPoints > 0));
}
const { Map, InfoWindow } = await google.maps.importLibrary("maps");
const {AdvancedMarkerElement} = await google.maps.importLibrary("marker");

let map = new Map(document.getElementById("map");

map.addListener("click", (mapsMouseEvent) => {
    alert(mapsMouseEvent.latLng.toJSON());
});

const markerPositions = [
   {
        position: new google.maps.LatLng(-33.91721, 151.2263),
        draggable: false,
   },
   {
        position: new google.maps.LatLng(-33.91539, 151.2282),
        draggable: true,
}];
  
let markers = [];

for (let i = 0; i < markerPositions.length; i++) {
    const marker = new AdvancedMarkerElement({
                        map: map,
                        position: markerPositions[i].position
                        gmpDraggable: markerPositions[i].draggable ? true : false;
    });
     
    if (!isTouchDevice) {  
        marker.addEventListener("gmp-click", () => {
          
            const infowindow = new google.maps.InfoWindow ({
                                   content: "This marker has been clicked",
            });
            infowindow.open({
                anchor: marker,
                map: map,      
            });
            map.panTo(marker.position);
          
        });
    }
    else {
        if (!marker.gmpDraggable) {
            marker.addEventListener("gmp-click", () => {
          
                const infowindow = new google.maps.InfoWindow ({
                                   content: "This marker has been clicked",
                });
                infowindow.open({
                    anchor: marker,
                    map: map,      
                });
                map.panTo(marker.position);
          
            });
        }
        else {
            marker.content.addEventListener("touchstart", () => {
          
                const infowindow = new google.maps.InfoWindow ({
                                   content: "This marker has been clicked",
                });
                infowindow.open({
                    anchor: marker,
                    map: map,      
                });
                map.panTo(marker.position);
        }
    }
    markers.push(marker);

}