Angular Material breaks A-G-Maps only on Chrome and only after Markers are added

[heinschulie]

Hi everybody,

My issue is so convoluted that I'm scared the solution is really obvious...I recently rehauled the design of a small app I am writing which relies heavily on Angular Google Maps. The new look uses the Angular Material framework and everything works amazingly well on Safari but for some reason on Chrome the map breaks completely (jumps erratically when attempting to pan etc.) as soon as markers are added to it.

Has anyone had any similar experiences working with these two frameworks? Or just any experience that may be of help? I have rebuilt the app up twice now trying to pin point the cause and just can't seem to find it.

I realize this invloves conflict between two frameworks but I think quite a few people are going to be wanting to take advantage of both so hopefully this question helps more people than just me. I will cross-post it on the Angular Material forums too and update both with any useful information.

Thanks so much in advance and let me know if more context is needed! Hein

My code is pretty generic but I'll include snippets below:

HTML

CONTROLLER

'use strict'; var app = angular.module('myApp'); app.controller('mapController', ["$scope", "$timeout", "$log", "geoLocationService", "uiGmapGoogleMapApi", "userState", function ($scope, $timeout, $log, geoLocationService, uiGmapGoogleMapApi, userState) {

$scope.serviceBase = appService.serviceBase;
$scope.userState = userState;

uiGmapGoogleMapApi.then(function (maps) {

     // ********************************************************************** INITIALIZATION AND MAP CALIBRATION AND METHODS //

    var styleArray = [
          {
              featureType: "all",
              stylers: [
                { saturation: -80 }
              ]
          }, {
              featureType: "road.arterial",
              elementType: "geometry",
              stylers: [
                { hue: "#00ffee" },
                { saturation: 50 }
              ]
          }, {
              featureType: "poi.business",
              elementType: "labels",
              stylers: [
                { visibility: "off" }
              ]
          }
    ];
    var mapOptions = {
        styles: styleArray,
        disableDefaultUI: true
    }

    // *** EVENTS *** // 

    function boundsChanged() {
        //If the city isn't set - this is the first time this map is instantiated. Try return to initial promise chain 
        if (!$scope.city)
            return;

        $scope.$apply(function () {
            var bounds = $scope.map.bounds;
            var center = $scope.map.center;

            // Bounds might not always be set so check that it exists first.
            if (bounds.northeast && center.latitude) {
                var lat1 = center.latitude;
                var lng1 = center.longitude;
                var lat2 = bounds.northeast.latitude;
                var lng2 = bounds.northeast.longitude;
                $scope.mapPosition = [];
                $scope.mapPosition.push(lat1);
                $scope.mapPosition.push(lng1);
                $scope.mapRadius = geoLocationService.haversineDistance(lat1, lng1, lat2, lng2);
                $scope.mapPosition.push($scope.mapRadius);
            }

    $scope.map = {
        center: { latitude: 45, longitude: -73 },
        zoom: 14,
        pan: true,
        options: mapOptions,
        control: {},
        markersControl: {},
        events: { 'idle': boundsChanged },
        bounds: {},
        showDirections: false
    };

    //INITIALIZATION : Find location of user

    var findLatLong = function () {
        return $scope.userState.callForUserLocation($scope, false)
           .then(function (position) {
               $scope.map.center.latitude = position.coords.latitude;
               $scope.map.center.longitude = position.coords.longitude;
               var latLong = position.coords.latitude + "," + position.coords.longitude;
               return latLong;
           });
    };

    var reverseGeoCodeCity = function (coordinates) {
        return geoLocationService.reverseGeoCodeCity($scope, coordinates, "app-map-canvas").then(function (results) {
            $scope.city = results;
            return coordinates;
        });
    };

    $scope.userState.callForUser()
        .then(findLatLong)
        .then(reverseGeoCodeCity);

}]);

[nmccready]

Can you create the example for people to debug on plnkr or jsbin? People are much more inclined to look at something if it takes them less work to run an example.

[nmccready]

Also there is a chance this is a css issue so we will need to see that as well.

[heinschulie]

Thanks @nmccready!

Apologies for not putting this up sooner. This is the first time I ever post an issue or write a plunkr for public viewing. Let me know if anything else is needed!

If anyone wishes to follow the other thread on this issue over on the Material forum, here is the link: https://github.com/angular/material/issues/4004

Else here is a plunk of the issue: http://plnkr.co/edit/QHmv0yRJS396hLcPJHKs And here is a running demo site: http://matmapchromeissue.azurewebsites.net/

Some more context: This issue only appears on the mobile version of Chrome, not the desktop version nor the emulator view. Furthermore, I've tested it now on an iPhone 4, 5, 6 and HTC 1 - the bug appears on all the iPhone Chromes but not on the HTC1. I have had reports though of other android users struggling - so I don't believe it is limited to iOs devices.

To make things more complicated - my plunkr runs fine through Chrome, hence I stood up a quick site for anyone to see the exact effect of what I'm talking about. The EXACT same code is running on both.

Framework versions: Angular : 1.3.15 Material: 0.9.4 Angular-Google-Maps: 2.1.5 Chrome versions vary.

Thanks! Hein

[nmccready]

Ugh this is convoluted and I can't (that I know of) mock the environment on browser stack I can only run the IOS emulator with Safari (Chrome is not installed). I do have an IPAD and I have noticed that Google does not update chrome for IOS reliably as they have little motivation to do so.

I ran the plnkr and example on the IPAD and didn't notice / exhibit the issues (jittery) described . I did notice though that idle is fired twice on every mouse drag in IOS though. The double event firing does not happen in Safari. This too me would totally cause jittery ness on the map directive as a race to tell it where it is to be positioned. A debounce inside the directive would help with this possibly; but doing it for a specific browser kinda sucks.

[nmccready]

For your code above (originally) what does your directive/html setup look like? I am more curious with what is happening inside of your boundsChanged event handle.

[nmccready]

I actually do usually use debounce in my controllers on the handling the events from Maps like AngularLeaflet and things like drag on google maps. So it might not be a bad idea to wrap this is the directive and save everyone the hassle in the controller. In adding this we would need to set it up to allow the debouncing to be turned off for specific events (white list/blacklist ) incase some people feel they are missing events.

[heinschulie]

Hi @nmccready -

Apologies for the delayed response. My html directive/html usage in the plnkr, example site and original site is actually identical. The only difference in the original site is obviously that it fetches live data. It really is just a map on the screen.

On a second look it seems my boundsChanged event handle is the victim of a bad copy/paste job... it does actually close before I declare the 'map' variable! Essentially all it does is try find the radius of the view that user is currently looking at so that it can fetch data relevant within that geographic area. I first implemented that code when I was just working with the bare GMaps Api - so there is undoubtedly a better way to handle it, I'm sure.

As far as you being unable to reproduce it - I don't own an iPad but I have subsequently tested it on an LG G3 and that too did not struggle at all - regardless of browser. I do find on my phone (iphone4s) that the 'jitteriness' only happens at around the 20th time the event fires - that is to say, when there are around twenty markers or more on the map. In the live scenario - with the marker objects being slightly heavier ito data - it happens almost immediately.

Finally, I too noticed that Chrome fires the idle event twice. Like I alluded to above - I'm a relative noob at this level but I'm totally willing to take a shot at writing the debounce functionality if you think that it will help - not only with this bug but also just generally.

[nmccready]

@heinschulie any luck on this?

[leocaseiro]

I'm not sure if your breaks is as same as mine, but I fixed with that:

md-card :not(ui-gmap-google-map) img {
    height: auto !important;
}