fix(google-maps): internal events run inside NgZone

The custom Google Maps event work by binding everything ahead of time and then dispatching the results to the various listeners, however the result of this is that they'll trigger change detection for events that the consumer hasn't subscribed to. These changes switch to initializing the Google Maps objects outside the `NgZone` and then only bringing the ones that the consumer has subscribed to back inside.

Author: crisbeto

src/google-maps/google-map/google-map.ts

@@ -22,6 +22,7 @@ import {
   Optional,
   Inject,
   PLATFORM_ID,
+  NgZone,
 } from '@angular/core';
 import {isPlatformBrowser} from '@angular/common';
 import {BehaviorSubject, combineLatest, Observable, Subject} from 'rxjs';
@@ -64,7 +65,7 @@ export const DEFAULT_WIDTH = '500px';
   encapsulation: ViewEncapsulation.None,
 })
 export class GoogleMap implements OnChanges, OnInit, OnDestroy {
-  private _eventManager = new MapEventManager();
+  private _eventManager = new MapEventManager(this._ngZone);
 
   /** Whether we're currently rendering inside a browser. */
   private _isBrowser: boolean;
@@ -227,7 +228,12 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
      * @deprecated `platformId` parameter to become required.
      * @breaking-change 10.0.0
      */
-    @Optional() @Inject(PLATFORM_ID) platformId?: Object) {
+    @Optional() @Inject(PLATFORM_ID) platformId?: Object,
+    /**
+     * @deprecated `_ngZone` parameter to become required.
+     * @breaking-change 11.0.0
+     */
+    private _ngZone?: NgZone) {
 
     // @breaking-change 10.0.0 Remove null check for `platformId`.
     this._isBrowser =
@@ -453,7 +459,19 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
       Observable<google.maps.Map> {
     return optionsChanges.pipe(
         take(1),
-        map(options => new google.maps.Map(this._mapEl, options)),
+        map(options => {
+          const initialize = () => new google.maps.Map(this._mapEl, options);
+
+          // @breaking-change 11.0.0 Remove null check for `ngZone`.
+          if (this._ngZone) {
+            // Create the object outside the zone so its events don't trigger change detection.
+            // We'll bring it back in inside the `MapEventManager` only for the events that the
+            // user has subscribed to.
+            return this._ngZone.runOutsideAngular(initialize);
+          } else {
+            return initialize();
+          }
+        }),
         shareReplay(1));
   }
 

src/google-maps/map-event-manager.ts

@@ -6,6 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {NgZone} from '@angular/core';
 import {Observable, Subscriber} from 'rxjs';
 
 type MapEventManagerTarget = {
@@ -28,6 +29,11 @@ export class MapEventManager {
     this._listeners = [];
   }
 
+  // @breaking-change 11.0.0 `_ngZone` parameter to become required.
+  constructor(private _ngZone?: NgZone) {
+    console.log(!!_ngZone);
+  }
+
   /** Gets an observable that adds an event listener to the map when a consumer subscribes to it. */
   getLazyEmitter<T>(name: string): Observable<T> {
     const observable = new Observable<T>(observer => {
@@ -37,7 +43,14 @@ export class MapEventManager {
         return undefined;
       }
 
-      const listener = this._target.addListener(name, (event: T) => observer.next(event));
+      const listener = this._target.addListener(name, (event: T) => {
+        // @breaking-change 11.0.0 Remove null check for `_ngZone`.
+        if (this._ngZone) {
+          this._ngZone.run(() => observer.next(event));
+        } else {
+          observer.next(event);
+        }
+      });
       this._listeners.push(listener);
       return () => listener.remove();
     });

src/google-maps/map-info-window/map-info-window.ts

@@ -16,6 +16,7 @@ import {
   OnDestroy,
   OnInit,
   Output,
+  NgZone,
 } from '@angular/core';
 import {BehaviorSubject, combineLatest, Observable, Subject} from 'rxjs';
 import {map, takeUntil} from 'rxjs/operators';
@@ -33,7 +34,7 @@ import {MapEventManager} from '../map-event-manager';
   host: {'style': 'display: none'},
 })
 export class MapInfoWindow implements OnInit, OnDestroy {
-  private _eventManager = new MapEventManager();
+  private _eventManager = new MapEventManager(this._ngZone);
   private readonly _options = new BehaviorSubject<google.maps.InfoWindowOptions>({});
   private readonly _position =
       new BehaviorSubject<google.maps.LatLngLiteral|google.maps.LatLng|undefined>(undefined);
@@ -87,14 +88,30 @@ export class MapInfoWindow implements OnInit, OnDestroy {
   zindexChanged: Observable<void> = this._eventManager.getLazyEmitter<void>('zindex_changed');
 
   constructor(private readonly _googleMap: GoogleMap,
-              private _elementRef: ElementRef<HTMLElement>) {}
+              private _elementRef: ElementRef<HTMLElement>,
+              /**
+               * @deprecated `_ngZone` parameter to become required.
+               * @breaking-change 11.0.0
+               */
+              private _ngZone?: NgZone) {}
 
   ngOnInit() {
     this._combineOptions().pipe(takeUntil(this._destroy)).subscribe(options => {
       if (this._infoWindow) {
         this._infoWindow.setOptions(options);
       } else {
-        this._infoWindow = new google.maps.InfoWindow(options);
+        const initialize = () => this._infoWindow = new google.maps.InfoWindow(options);
+
+        // @breaking-change 11.0.0 Remove null check for `ngZone`.
+        if (this._ngZone) {
+            // Create the object outside the zone so its events don't trigger change detection.
+            // We'll bring it back in inside the `MapEventManager` only for the events that the
+            // user has subscribed to.
+          this._ngZone.runOutsideAngular(initialize);
+        } else {
+          initialize();
+        }
+
         this._eventManager.setTarget(this._infoWindow);
       }
     });

src/google-maps/map-marker/map-marker.ts

@@ -16,7 +16,8 @@ import {
   OnDestroy,
   OnInit,
   Output,
-  ViewEncapsulation
+  ViewEncapsulation,
+  NgZone
 } from '@angular/core';
 import {BehaviorSubject, combineLatest, Observable, Subject} from 'rxjs';
 import {map, take, takeUntil} from 'rxjs/operators';
@@ -43,7 +44,7 @@ export const DEFAULT_MARKER_OPTIONS = {
   encapsulation: ViewEncapsulation.None,
 })
 export class MapMarker implements OnInit, OnDestroy {
-  private _eventManager = new MapEventManager();
+  private _eventManager = new MapEventManager(this._ngZone);
   private readonly _options =
       new BehaviorSubject<google.maps.MarkerOptions>(DEFAULT_MARKER_OPTIONS);
   private readonly _title = new BehaviorSubject<string|undefined>(undefined);
@@ -236,14 +237,31 @@ export class MapMarker implements OnInit, OnDestroy {
 
   _marker?: google.maps.Marker;
 
-  constructor(private readonly _googleMap: GoogleMap) {}
+  constructor(
+    private readonly _googleMap: GoogleMap,
+    /**
+     * @deprecated `_ngZone` parameter to become required.
+     * @breaking-change 11.0.0
+     */
+    private _ngZone?: NgZone) {}
 
   ngOnInit() {
     const combinedOptionsChanges = this._combineOptions();
 
     combinedOptionsChanges.pipe(take(1)).subscribe(options => {
-      this._marker = new google.maps.Marker(options);
-      this._marker.setMap(this._googleMap._googleMap);
+      const initialize = () => this._marker = new google.maps.Marker(options);
+
+      // @breaking-change 11.0.0 Remove null check for `ngZone`.
+      if (this._ngZone) {
+          // Create the object outside the zone so its events don't trigger change detection.
+          // We'll bring it back in inside the `MapEventManager` only for the events that the
+          // user has subscribed to.
+        this._ngZone.runOutsideAngular(initialize);
+      } else {
+        initialize();
+      }
+
+      this._marker!.setMap(this._googleMap._googleMap);
       this._eventManager.setTarget(this._marker);
     });
 

src/google-maps/map-polyline/map-polyline.ts

@@ -15,6 +15,7 @@ import {
   OnDestroy,
   OnInit,
   Output,
+  NgZone,
 } from '@angular/core';
 import {BehaviorSubject, combineLatest, Observable, Subject} from 'rxjs';
 import {map, take, takeUntil} from 'rxjs/operators';
@@ -30,7 +31,7 @@ import {MapEventManager} from '../map-event-manager';
   selector: 'map-polyline',
 })
 export class MapPolyline implements OnInit, OnDestroy {
-  private _eventManager = new MapEventManager();
+  private _eventManager = new MapEventManager(this._ngZone);
   private readonly _options = new BehaviorSubject<google.maps.PolylineOptions>({});
   private readonly _path =
       new BehaviorSubject<google.maps.MVCArray<google.maps.LatLng>|google.maps.LatLng[]|
@@ -129,13 +130,30 @@ export class MapPolyline implements OnInit, OnDestroy {
   polylineRightclick: Observable<google.maps.PolyMouseEvent> =
       this._eventManager.getLazyEmitter<google.maps.PolyMouseEvent>('rightclick');
 
-  constructor(private readonly _map: GoogleMap) {}
+  constructor(
+    private readonly _map: GoogleMap,
+    /**
+     * @deprecated `_ngZone` parameter to become required.
+     * @breaking-change 11.0.0
+     */
+    private _ngZone?: NgZone) {}
 
   ngOnInit() {
     const combinedOptionsChanges = this._combineOptions();
 
     combinedOptionsChanges.pipe(take(1)).subscribe(options => {
-      this._polyline = new google.maps.Polyline(options);
+      const initialize = () => this._polyline = new google.maps.Polyline(options);
+
+      // @breaking-change 11.0.0 Remove null check for `ngZone`.
+      if (this._ngZone) {
+          // Create the object outside the zone so its events don't trigger change detection.
+          // We'll bring it back in inside the `MapEventManager` only for the events that the
+          // user has subscribed to.
+        this._ngZone.runOutsideAngular(initialize);
+      } else {
+        initialize();
+      }
+
       this._polyline.setMap(this._map._googleMap);
       this._eventManager.setTarget(this._polyline);
     });

tools/public_api_guard/google-maps/google-maps.d.ts

@@ -28,7 +28,8 @@ export declare class GoogleMap implements OnChanges, OnInit, OnDestroy {
     zoom: number;
     zoomChanged: Observable<void>;
     constructor(_elementRef: ElementRef,
-    platformId?: Object);
+    platformId?: Object,
+    _ngZone?: NgZone | undefined);
     fitBounds(bounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral, padding?: number | google.maps.Padding): void;
     getBounds(): google.maps.LatLngBounds | null;
     getCenter(): google.maps.LatLng;
@@ -62,7 +63,8 @@ export declare class MapInfoWindow implements OnInit, OnDestroy {
     position: google.maps.LatLngLiteral | google.maps.LatLng;
     positionChanged: Observable<void>;
     zindexChanged: Observable<void>;
-    constructor(_googleMap: GoogleMap, _elementRef: ElementRef<HTMLElement>);
+    constructor(_googleMap: GoogleMap, _elementRef: ElementRef<HTMLElement>,
+    _ngZone?: NgZone | undefined);
     close(): void;
     getContent(): string | Node;
     getPosition(): google.maps.LatLng | null;
@@ -102,7 +104,8 @@ export declare class MapMarker implements OnInit, OnDestroy {
     titleChanged: Observable<void>;
     visibleChanged: Observable<void>;
     zindexChanged: Observable<void>;
-    constructor(_googleMap: GoogleMap);
+    constructor(_googleMap: GoogleMap,
+    _ngZone?: NgZone | undefined);
     getAnimation(): google.maps.Animation | null;
     getClickable(): boolean;
     getCursor(): string | null;
@@ -136,7 +139,8 @@ export declare class MapPolyline implements OnInit, OnDestroy {
     polylineMouseover: Observable<google.maps.PolyMouseEvent>;
     polylineMouseup: Observable<google.maps.PolyMouseEvent>;
     polylineRightclick: Observable<google.maps.PolyMouseEvent>;
-    constructor(_map: GoogleMap);
+    constructor(_map: GoogleMap,
+    _ngZone?: NgZone | undefined);
     getDraggable(): boolean;
     getEditable(): boolean;
     getPath(): google.maps.MVCArray<google.maps.LatLng>;