angularjsgoogle-mapsangularjs-materialng-map

Google Maps API gesture handling not working with AngularJS Material

(EDIT: When you use plain Google Maps API with AngularJS Material the problem is the same.)

When I use at the same time in my AngularJS app:

Maps don't work properly on mobile (on desktop it is ok) - the problem is with touch gestures. Example:

https://incampo.pl/map2.html - (test on mobile!)

but when I don't use material:

angular.module("incampoApp", ["ngMap"])

instead of:

angular.module("incampoApp", ["ngMap", "ngMaterial"])

it works properly: https://incampo.pl/map.html - (test on mobile!)

My whole example code (JS compiled from typescript):

<!DOCTYPE html>
<html ng-app="incampoApp">
<head>
</head>
<body ng-controller="offerController as vm">

<div map-lazy-load="https://maps.googleapis.com/maps/api/js?key=AIzaSyAyufiB6xUh1SzM7LK2NniXGDPyY__KtP8&callback=initMap">
    <ng-map id="map" min-zoom="2" zoom="6" center="52.2,19"></ng-map>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.4/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.4/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.10/angular-material.min.js"></script>
<script src="//rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>

<script>
    var IncampoApp;
    (function (IncampoApp) {
        var OfferController = (function () {
            function OfferController(ngMap) {

                ngMap.getMap();
            }

            OfferController.$inject = ["NgMap"];

            return OfferController;
        }());
        IncampoApp.OfferController = OfferController;
    })(IncampoApp || (IncampoApp = {}));
</script>

<script>
    var IncampoApp;
    (function (IncampoApp) {
        angular.module("incampoApp", ["ngMap", "ngMaterial"]).controller("offerController", IncampoApp.OfferController);
    })(IncampoApp || (IncampoApp = {}));
</script>
</body>
</html>

Do you have any idea why?

Solution

  • I've found the solution here: https://github.com/angular/material/issues/11205

    You just need 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();
  });