angularjs - 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

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.