Pinch-to-zoom on embedded Google Map zooms whole page

Question

How can I get pinch-to-zoom to work properly in my Google Maps v3-based web app? Right now, pinching on a touchscreen Windows 8 device will zoom the whole page, not the map. I've tried this in both Chrome and Firefox, and it works properly on the Google Maps site, but not on my site.

I have the following meta tag in my <head> element, but it doesn't seem to help. Is there another meta tag I need to add? I checked out the source of the Google Maps site but couldn't find any meta tags that looked relevant.

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

score 0 · Answer 1 · edited May 23 '17 at 12:09

this is most likely because you're using an overlay.

you can block pinch and drag by adding this code:

window.blockMenuHeaderScroll = false;
$(window).on('touchstart', function(e)
{
    if ($(e.target).closest('#map').length == 1)
    {
        blockMenuHeaderScroll = true;
    }
});
$(window).on('touchend', function()
{
    blockMenuHeaderScroll = false;
});
$(window).on('touchmove', function(e)
{
    if (blockMenuHeaderScroll)
    {
        e.preventDefault();
    }
});

thanks to https://stackoverflow.com/a/17159809

score 0 · Answer 2 · answered Jan 20 '23 at 21:39

If you don't specify explicit gestureHandling for the 2D Map then it can happen that the map element defaults to "greedy" behavior. This can surely happen if your map is not inside an iframe. With greedy behavior the map will hijack more gestures than in "cooperative" mode. See Controlling Gesture Handling.

When the gesture handling is greedy than you won't see the "Use two fingers to move the map" message over the 2D Map when you scroll over it with flick gestures. In such cases explicitly specifying cooperative gesture handling helps, although it may not fix the problem fully, because the issue is also browser dependent. Even with cooperative I may see a little page zoom on Android Chrome based browser, but the behavior is much better.

new google.maps.Map(document.getElementById("map"), {
  zoom,
  center,
  gestureHandling: "cooperative",
});

As for @jimmy's answer below I'd highly disadvise handler manipulation JavaScript hackery, the good news is that there's native support on the v3 Maps API to disable pan and zoom or even restrict bounds.

Pinch-to-zoom on embedded Google Map zooms whole page

2 Answers2