Search code examples
angularjsgoogle-mapsgoogle-maps-api-3touchmulti-touch

Touch Events not working with Google Maps in Angular


I am using Google Maps javascript API within an angular application. When using the app in Google Chrome on a regular desktop machine with a mouse, various navigation features (pan/zoom) work in the google maps part of the application just fine. However, when I try to use touch gestures on a windows 8.1 screen, the maps do not recognize any of the pan or zoom gestures. If I pinch to zoom, nothing happens. If I double tap on the screen like a mouse, then maps will zoom in. If I drag with a finger, the browser window handles the touch events instead of the maps div, so left and right navigates page history and up and down dragging scrolls the whole page instead of panning the maps.

As another experiment, I tried using google maps http://maps.google.com itself inside of Chrome, and it worked fine. So that means that it can be done somehow....

So, is it a viewport meta tag type of thing? Or does it have to do with sizing the map element? Or is it an angular thing and we need to do something with ngTouch somehow to allow the app to respond to touch events?

Update: the touch events do work on the same page on an iPad. I'm not sure what that says, but it's encouraging that at least it works on mobile safari. It seems that we need to communicate something to Angular to tell it to accept the touch events.

UPDATE

This issue was handled in the bug

https://issuetracker.google.com/issues/35824421

and was solved in version 3.27 of Google Maps JavaScript API in December 2016.


Solution

  • This is in fact a Google Map bug #6425

    The fun fact is that Google Map API is not serving the same content based on the User Agent. So, for some use case, the workaround is to spoof the User Agent, ether by :

    • Chrome Dev tool > Emulation > Model
    • a user agent spoofing extension
    • --user-agent chrome flag

    Any android or iOS device will work, changing the default desktop google map app to a mobile like app. Drag and pinch will work again on this mobile like app.

    After some testing, the minimal UA that switches to the mobile like app is "Chrome" or "AppleWebKit/537", but it sounds hazardous to use it, as it may very well change in the future.

    For my purpose, chrome based kioks, this will do the trick until the bug is fixed.