Material: Angular Material causing Google Maps version 3.32 Gesture Handling to not work

[Nazariy995]

Bug:

• A user is not able to pan on a google maps widget that is used in a web application.
  When a web page loads with google maps, if a user tries to pan with a touch and drag gesture, nothing happens. Sometimes, upon dragging, the map will superzoom onto a random spot even.
• I am posting a bug here because I noticed that the bug is resolved if Angular Material is removed from the web application. So this told me that there might be some kind of a discrepancy between Angular Material and Google Maps version 3.32 in terms of gesture handling.

What is the expected behavior?

• A user is able to pan, with a touch and drag gesture, on a google maps widget.

What is the current behavior?

• When a user tries to pan on a google maps widget, the map does not move or pan. Sometimes, if a user tries to pan, google maps would superzoom into a random spot and then not allow a user to zoom out.

CodePen and steps to reproduce the issue:

• Google Maps not allowing users on mobile devices to Pan: Link
• Google Maps working great on applications without Angular Material: Link
• Google Maps working great on applications with Angular Material and Google Maps 3.31: Link

Detailed Reproduction Steps:

1. Open https://embed.plnkr.co/26e7kL/ on a mobile Android Device
2. Try panning on the map
3. From my experience, google maps, would not allow users to pan.

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS 1.6.9
• Angular Material 1.1.8
• Google Maps 3.32
• Browsers: Any browser on Android Mobile Devices

What is the use-case or motivation for changing an existing behavior?

Is there anything else we should know? Stack Traces, Screenshots, etc.

• I made a small video explaining the issue:
  https://youtu.be/TYfuuY5GHnU
• I noticed that this issue is resolved if we use Google Maps version 3.31 instead of 3.32.
• My colleague, Anthony, also noticed that this issue is resolved if we remove Angular Material from the equation while still using Google Maps 3.32.
  I am not sure, if this issue is directly related to Angular Material, but I know that it is part of the equation. I already posted a bug report on Google Maps Javascript API, but I also thoguht it might be useful to do it here as well. If you think, this issue is not related to Angular Material, feel free to close it.

[Splaktar]

This Plunker demonstrates the fix which is to call $mdGestureProvider.skipClickHijack();.

      angular.module('myapp', ['ngMaterial', 'ngMessages'])
      .config(function($mdGestureProvider) {
        // For mobile devices without jQuery loaded, do not
        // intercept click events during the capture phase.
        $mdGestureProvider.skipClickHijack();
      });

[Nazariy995]

@Splaktar Thank you very much for the help! I'm curious. Based on your comment in the code, are you saying that if we are using jquery, then that shouldn't be a problem?

[Splaktar]

That comment is from an old example, I don't know how jQuery being used or not creates a problem. You can certainly test it out on your app.