4

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">
caitlin
  • 2,708
  • 4
  • 27
  • 62

2 Answers2

0

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

Community
  • 1
  • 1
jimmy
  • 286
  • 2
  • 8
-2

I'm from windows froms development, built-in webbrowser used to display googleMap, but found that on the touch device, two-finger scaling will cause the entire page to zoom, rather than scaling the map, and finally my solution is as follows: In the gpedit.msc, the browser page zoom function is disabled to achieve this effect, but I think it is not perfect, why webbrowser processing page zoom priority will be higher by googleMap

Jason
  • 1
  • 2