Click doesn't respond on iOS

Question

The click event doesn't fire on iOS with the following JavaScript. It works fine on Windows. Why is this happening? Is there a workaround?

const pin = new google.maps.marker.PinElement({
    scale: 1.0,
    glyphColor: "green"
});
var testMarker = new google.maps.marker.AdvancedMarkerElement({
    content:        pin.element,
    gmpClickable:   true,
    gmpDraggable:   true
});
testMarker.position = new google.maps.LatLng(
    34.718420, 135.556109
);
testMarker.map = mapObj;
testMarker.addListener(
    'dragend',
    function (event) {
        alert('dragged');
    }
);
testMarker.addListener(
    'click',
    function (event) {
        alert('clicked');
    }
);

On Windows + Chrome, the "clicked" alert is displayed correctly, but on iOS + Chrome (or Safari), nothing happens. Regarding "dragend", it works as expected in both cases. Using "gmp-click" instead of the "click" event produces the same results. Also, if you don't add the "dragend" event, the click event works correctly.

Does the dragend fire when you (think you have...) clicked? May be worth trying mouseup (?) to see if that fires OK. — A Haworth
– A Haworth, Commented Aug 30 at 6:28
The mouseUp event also fires when the drag ends. The code shown here is a sample; what I actually want to do is update the database when the marker is moved, and delete the marker when it is clicked. In this case, it would be inconvenient if the marker disappeared immediately after dragging. — iPadTaxi
– iPadTaxi, Commented Aug 30 at 17:42

iPadTaxi · Accepted Answer · 2025-09-04 04:30:41Z

I found one solution: assign a pointer event to testMarker.content to control its behavior.

The previous answer did not work properly on Android + Chrome. So I improved it by storing the click location (x, y) in the 'pointermove' event and measuring the distance the pointer moved, and now it works correctly.

const pin = new google.maps.marker.PinElement({
    scale: 1.0,
    glyphColor: "green"
});
var testMarker = new google.maps.marker.AdvancedMarkerElement({
    content:        pin.element,
    gmpDraggable:   true,
});
testMarker.content.style.cursor = "move";

testMarker.position = new google.maps.LatLng(
    34.718420, 135.556109
);
testMarker.map = mapObj;

// instead of click or gmp-click
var x, y, isDrag;
testMarker.content.addEventListener('pointerdown', (event) => {
    x = event.clientX;
    y = event.clientY;
    isDrag = false;
});
testMarker.content.addEventListener('pointermove', (event) => {
    if (event.buttons <= 0) return;
    var dx = Math.abs(event.clientX - x);
    var dy = Math.abs(event.clientY - y);
    x = event.clientX;
    y = event.clientY;
    if (dx > 0 || dy > 0) {
        isDrag = true;
    };
});
testMarker.content.addEventListener('pointerup', (event) => {
    if (! isDrag) {
        testMarker.blur();
        // test print
        var info = document.getElementById("map_info");
        info.innerHTML = "clicked";
        setTimeout(()=>{
            info.innerHTML = "";
        }, 1000);
    };
});

google.maps.event.addListener(
    testMarker,
    'dragend',
    function (event) {
        if (isDrag) {
            isDrag = false;
            testMarker.blur();
            // test print
            var info = document.getElementById("map_info");
            info.innerHTML = "dragged";
            setTimeout(()=>{
                info.innerHTML = "";
            }, 1000);
        };
    }
);

Thank you.

In the sample code above, testMarker.content.addEventListener() worked in API 3.62.9, but from API 3.62.11 onwards, it started throwing an error. This is likely related to the deprecation of AdvancedMarkerElement.content. It seems that the correct solution is to use testMarker.addEventListener() instead.

0ro2 · Accepted Answer · 2025-08-30 22:15:57Z

0

Try manually triggering the click on a touchend event.

testMarker.content.addEventListener('touchend', function(event) {
    google.maps.event.trigger(testMarker, 'click');
});

answered Aug 30 at 22:15

0ro2

1,0402 silver badges25 bronze badges

1 Comment

iPadTaxi Aug 31 at 1:40

Thank you for your reply. However, this code did not work. However, I learned that you can set an event listener for testMarker.content.

Collectives™ on Stack Overflow

Click doesn't respond on iOS

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related