Google Maps V3 - Prevent Context Menu on Right Click on Marker

Question

After some recent update on google Maps Javascript V3 API, I noticed that contextmenu started being shown when i make a rightclick on a marker. Basically the code is

google.maps.event.addListener(marker, 'rightclick', function (event) {
    foo(marker);
});

I have already tried the option

google.maps.event.addListener(marker, 'rightclick', function (event) {
    deleteMarker(marker);
    event.stop();
    return false;
});

But the context menu still continue to appear. I also put this on the whole map

    $("#map").contextmenu(function (e) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    });

And, rightly, contextmenu doesn't appear when clicking on map. How can I stop if also on marker rightclick?

This is an example for the issue: https://jsfiddle.net/rnxLum5j/

Please provide a [mcve] that demonstrates your issue. – geocodezip Mar 04 '18 at 05:29 — geocodezip, Mar 04 '18 at 05:29

score 4 · Answer 1 · answered Sep 05 '18 at 09:56

4

Had the same issue and solved it by deferring execution of showing dialog using timeout. In your fiddle change the google.maps.event.addListener to

 google.maps.event.addListener(map, 'rightclick', function (ev) {
    setTimeout(ShowContextMenuGoolge, 0, ContextMenu, ev);
});

answered Sep 05 '18 at 09:56

Niels Peter Sorensen

41
2

This was the only thing that worked for me when experiencing this issue using the new Angular maps widget. – S Walsh Oct 19 '20 at 22:30

score 1 · Answer 2 · answered Mar 05 '18 at 09:20

1

At the end i solved disabling the context menu on the div in which the map was in instead of the map itself.

answered Mar 05 '18 at 09:20

emmea90

357
4
10

judian · Accepted Answer · 2018-05-22T08:18:38.913

I also have this problem.

I think this is a bug of google maps 'rightclick' event.

I tried to stop propagation and cancel bubbling, but DOM 'contextmenu' event still firing on the open 'context-menu' element!

My solution stopping the event from firing on the context menu element.

var mapCanvas = document.getElementById("map_canvas");
$(mapCanvas).on('contextmenu', '.custom-context-menu', function (e) {
    e.stopPropagation();
    e.preventDefault();
    return false;
});

This is an example for the bug: https://jsfiddle.net/rnxLum5j/

Google Maps V3 - Prevent Context Menu on Right Click on Marker

3 Answers3