Touch Events not working with Google Maps in Angular

Question

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.

Answer 1

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.

Answer 2

Putting the following code before the google maps api script tag helps me. But, unfortunately, it continues to disable mouse events. Please, can we a find a solution for Google Maps API with both touch and mouse support?

This solution in place of setting the application boot flags of '--user-agent chrome' or '--user-agent safari'

<script>
navigator = navigator || {};
navigator.msMaxTouchPoints = navigator.msMaxTouchPoints || 2;

//navigator.maxTouchPoints = navigator.maxTouchPoints || 2;
//window.ontouchstart = window.ontouchstart || function() {console.log('this is touchstart!');};
</script>

Note that only the first two lines are used, the other two are commented out and were not required.

My inspiration for this solution is from: https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/ so thank you to Patrick and Robert.

Answer 3

I used the above solution and modified for it to work with a mouse as well

<script>

function MapTouch() {
        return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
    }
    if (MapTouch() === true) {
        navigator = navigator || {};
        navigator.msMaxTouchPoints = navigator.msMaxTouchPoints || 2;
   }
</script>

Answer 4

I had the same problem.

JJ Stiff's solution enabled the touch events.

Apparently if you also want the mouse to work, you have to add the following line:

navigator.msPointerEnabled = true;