fix(GoogleMapsAPIWrapper): run Google Maps Apis outside of Angular (#1714)

Wrap all Google Maps APIs calls in the wrapper with runOutsideAngular

fixes: #815

Author: mpienkowski

packages/core/services/google-maps-api-wrapper.ts

@@ -23,7 +23,7 @@ export class GoogleMapsAPIWrapper {
   }
 
   createMap(el: HTMLElement, mapOptions: mapTypes.MapOptions): Promise<void> {
-    return this._zone.runOutsideAngular( () => {
+    return this._zone.runOutsideAngular(() => {
       return this._loader.load().then(() => {
         const map = new google.maps.Map(el, mapOptions);
         this._mapResolver(map as mapTypes.GoogleMap);
@@ -33,73 +33,89 @@ export class GoogleMapsAPIWrapper {
   }
 
   setMapOptions(options: mapTypes.MapOptions) {
-    this._map.then((m: mapTypes.GoogleMap) => { m.setOptions(options); });
+    return this._zone.runOutsideAngular(() => {
+      this._map.then((m: mapTypes.GoogleMap) => { m.setOptions(options); });
+    });
   }
 
   /**
    * Creates a google map marker with the map context
    */
   createMarker(options: mapTypes.MarkerOptions = {} as mapTypes.MarkerOptions, addToMap: boolean = true):
       Promise<mapTypes.Marker> {
-    return this._map.then((map: mapTypes.GoogleMap) => {
-      if (addToMap) {
-        options.map = map;
-      }
-      return new google.maps.Marker(options);
+    return this._zone.runOutsideAngular(() => {
+      return this._map.then((map: mapTypes.GoogleMap) => {
+        if (addToMap) {
+          options.map = map;
+        }
+        return new google.maps.Marker(options);
+      });
     });
   }
 
   createInfoWindow(options?: mapTypes.InfoWindowOptions): Promise<mapTypes.InfoWindow> {
-    return this._map.then(() => { return new google.maps.InfoWindow(options); });
+    return this._zone.runOutsideAngular(() => {
+      return this._map.then(() => { return new google.maps.InfoWindow(options); });
+    });
   }
 
   /**
    * Creates a google.map.Circle for the current map.
    */
   createCircle(options: mapTypes.CircleOptions): Promise<mapTypes.Circle> {
-    return this._map.then((map: mapTypes.GoogleMap) => {
-      if (typeof options.strokePosition === 'string') {
-        options.strokePosition = google.maps.StrokePosition[options.strokePosition];
-      }
-      options.map = map;
-      return new google.maps.Circle(options);
+    return this._zone.runOutsideAngular(() => {
+      return this._map.then((map: mapTypes.GoogleMap) => {
+        if (typeof options.strokePosition === 'string') {
+          options.strokePosition = google.maps.StrokePosition[options.strokePosition];
+        }
+        options.map = map;
+        return new google.maps.Circle(options);
+      });
     });
   }
 
   /**
    * Creates a google.map.Rectangle for the current map.
    */
   createRectangle(options: mapTypes.RectangleOptions): Promise<mapTypes.Rectangle> {
-    return this._map.then((map: mapTypes.GoogleMap) => {
-      options.map = map;
-      return new google.maps.Rectangle(options);
+    return this._zone.runOutsideAngular(() => {
+      return this._map.then((map: mapTypes.GoogleMap) => {
+        options.map = map;
+        return new google.maps.Rectangle(options);
+      });
     });
   }
 
   createPolyline(options: PolylineOptions): Promise<Polyline> {
-    return this.getNativeMap().then((map: mapTypes.GoogleMap) => {
-      let line = new google.maps.Polyline(options);
-      line.setMap(map);
-      return line;
+    return this._zone.runOutsideAngular(() => {
+      return this.getNativeMap().then((map: mapTypes.GoogleMap) => {
+        let line = new google.maps.Polyline(options);
+        line.setMap(map);
+        return line;
+      });
     });
   }
 
   createPolygon(options: mapTypes.PolygonOptions): Promise<mapTypes.Polygon> {
-    return this.getNativeMap().then((map: mapTypes.GoogleMap) => {
-      let polygon = new google.maps.Polygon(options);
-      polygon.setMap(map);
-      return polygon;
+    return this._zone.runOutsideAngular(() => {
+      return this.getNativeMap().then((map: mapTypes.GoogleMap) => {
+        let polygon = new google.maps.Polygon(options);
+        polygon.setMap(map);
+        return polygon;
+      });
     });
   }
 
   /**
    * Creates a new google.map.Data layer for the current map
    */
   createDataLayer(options?: mapTypes.DataOptions): Promise<mapTypes.Data> {
-    return this._map.then(m => {
-      let data = new google.maps.Data(options);
-      data.setMap(m);
-      return data;
+    return this._zone.runOutsideAngular(() => {
+      return this._map.then(m => {
+        let data = new google.maps.Data(options);
+        data.setMap(m);
+        return data;
+      });
     });
   }
 
@@ -109,10 +125,12 @@ export class GoogleMapsAPIWrapper {
    * @returns {Promise<TransitLayer>} a new transit layer object
    */
   createTransitLayer(options: mapTypes.TransitLayerOptions): Promise<mapTypes.TransitLayer>{
-    return this._map.then((map: mapTypes.GoogleMap) => {
-      let newLayer: mapTypes.TransitLayer = new google.maps.TransitLayer();
-      newLayer.setMap(options.visible ? map : null);
-      return newLayer;
+    return this._zone.runOutsideAngular(() => {
+      return this._map.then((map: mapTypes.GoogleMap) => {
+        let newLayer: mapTypes.TransitLayer = new google.maps.TransitLayer();
+        newLayer.setMap(options.visible ? map : null);
+        return newLayer;
+      });
     });
   }
 
@@ -122,10 +140,12 @@ export class GoogleMapsAPIWrapper {
    * @returns {Promise<BicyclingLayer>} a new bicycling layer object
    */
   createBicyclingLayer(options: mapTypes.BicyclingLayerOptions): Promise<mapTypes.BicyclingLayer>{
-    return this._map.then((map: mapTypes.GoogleMap) => {
-      let newLayer: mapTypes.BicyclingLayer = new google.maps.BicyclingLayer();
-      newLayer.setMap(options.visible ? map : null);
-      return newLayer;
+    return this._zone.runOutsideAngular(() => {
+      return this._map.then((map: mapTypes.GoogleMap) => {
+        let newLayer: mapTypes.BicyclingLayer = new google.maps.BicyclingLayer();
+        newLayer.setMap(options.visible ? map : null);
+        return newLayer;
+      });
     });
   }
 
@@ -145,47 +165,71 @@ export class GoogleMapsAPIWrapper {
   }
 
   clearInstanceListeners() {
-    this._map.then((map: mapTypes.GoogleMap) => {
-      google.maps.event.clearInstanceListeners(map);
+    return this._zone.runOutsideAngular(() => {
+      this._map.then((map: mapTypes.GoogleMap) => {
+        google.maps.event.clearInstanceListeners(map);
+      });
     });
   }
 
   setCenter(latLng: mapTypes.LatLngLiteral): Promise<void> {
-    return this._map.then((map: mapTypes.GoogleMap) => map.setCenter(latLng));
+    return this._zone.runOutsideAngular(() => {
+      return this._map.then((map: mapTypes.GoogleMap) => map.setCenter(latLng));
+    });
   }
 
-  getZoom(): Promise<number> { return this._map.then((map: mapTypes.GoogleMap) => map.getZoom()); }
+  getZoom(): Promise<number> {
+    return this._zone.runOutsideAngular(() => {
+      return this._map.then((map: mapTypes.GoogleMap) => map.getZoom());
+    });
+  }
 
   getBounds(): Promise<mapTypes.LatLngBounds> {
-    return this._map.then((map: mapTypes.GoogleMap) => map.getBounds());
+    return this._zone.runOutsideAngular(() => {
+      return this._map.then((map: mapTypes.GoogleMap) => map.getBounds());
+    });
   }
 
   getMapTypeId(): Promise<mapTypes.MapTypeId> {
-    return this._map.then((map: mapTypes.GoogleMap) => map.getMapTypeId());
+    return this._zone.runOutsideAngular(() => {
+      return this._map.then((map: mapTypes.GoogleMap) => map.getMapTypeId());
+    });
   }
 
   setZoom(zoom: number): Promise<void> {
-    return this._map.then((map: mapTypes.GoogleMap) => map.setZoom(zoom));
+    return this._zone.runOutsideAngular(() => {
+      return this._map.then((map: mapTypes.GoogleMap) => map.setZoom(zoom));
+    });
   }
 
   getCenter(): Promise<mapTypes.LatLng> {
-    return this._map.then((map: mapTypes.GoogleMap) => map.getCenter());
+    return this._zone.runOutsideAngular(() => {
+      return this._map.then((map: mapTypes.GoogleMap) => map.getCenter());
+    });
   }
 
   panTo(latLng: mapTypes.LatLng | mapTypes.LatLngLiteral): Promise<void> {
-    return this._map.then((map) => map.panTo(latLng));
+    return this._zone.runOutsideAngular(() => {
+      return this._map.then((map) => map.panTo(latLng));
+    });
   }
 
   panBy(x: number, y: number): Promise<void> {
-    return this._map.then((map) => map.panBy(x, y));
+    return this._zone.runOutsideAngular(() => {
+      return this._map.then((map) => map.panBy(x, y));
+    });
   }
 
   fitBounds(latLng: mapTypes.LatLngBounds | mapTypes.LatLngBoundsLiteral, padding?: number | mapTypes.Padding): Promise<void> {
-    return this._map.then((map) => map.fitBounds(latLng, padding));
+    return this._zone.runOutsideAngular(() => {
+      return this._map.then((map) => map.fitBounds(latLng, padding));
+    });
   }
 
   panToBounds(latLng: mapTypes.LatLngBounds | mapTypes.LatLngBoundsLiteral, padding?: number | mapTypes.Padding): Promise<void> {
-    return this._map.then((map) => map.panToBounds(latLng, padding));
+    return this._zone.runOutsideAngular(() => {
+      return this._map.then((map) => map.panToBounds(latLng, padding));
+    });
   }
 
   /**