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

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: MapEventManager = new MapEventManager(this._ngZone);
   private _googleMapChanges: Observable<google.maps.Map>;
 
   private readonly _options = new BehaviorSubject<google.maps.MapOptions>(DEFAULT_OPTIONS);
@@ -223,6 +224,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
 
   constructor(
     private readonly _elementRef: ElementRef,
+    private _ngZone: NgZone,
     /**
      * @deprecated `platformId` parameter to become required.
      * @breaking-change 10.0.0
@@ -454,7 +456,12 @@ 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 => {
+          // 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(() => new google.maps.Map(this._mapEl, options));
+        }),
         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,8 @@ export class MapEventManager {
     this._listeners = [];
   }
 
+  constructor(private _ngZone: 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 +40,9 @@ export class MapEventManager {
         return undefined;
       }
 
-      const listener = this._target.addListener(name, (event: T) => observer.next(event));
+      const listener = this._target.addListener(name, (event: T) => {
+        this._ngZone.run(() => 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,15 +88,22 @@ 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>,
+              private _ngZone: NgZone) {}
 
   ngOnInit() {
     if (this._googleMap._isBrowser) {
       this._combineOptions().pipe(takeUntil(this._destroy)).subscribe(options => {
         if (this._infoWindow) {
           this._infoWindow.setOptions(options);
         } else {
-          this._infoWindow = new google.maps.InfoWindow(options);
+          // 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(() => {
+            this._infoWindow = new google.maps.InfoWindow(options);
+          });
+
           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,15 +237,20 @@ export class MapMarker implements OnInit, OnDestroy {
 
   _marker?: google.maps.Marker;
 
-  constructor(private readonly _googleMap: GoogleMap) {}
+  constructor(
+    private readonly _googleMap: GoogleMap,
+    private _ngZone: NgZone) {}
 
   ngOnInit() {
     if (this._googleMap._isBrowser) {
       const combinedOptionsChanges = this._combineOptions();
 
       combinedOptionsChanges.pipe(take(1)).subscribe(options => {
-        this._marker = new google.maps.Marker(options);
-        this._marker.setMap(this._googleMap._googleMap);
+        // 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(() => this._marker = new google.maps.Marker(options));
+        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,14 +130,19 @@ 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,
+    private _ngZone: NgZone) {}
 
   ngOnInit() {
     if (this._map._isBrowser) {
       const combinedOptionsChanges = this._combineOptions();
 
       combinedOptionsChanges.pipe(take(1)).subscribe(options => {
-        this._polyline = new google.maps.Polyline(options);
+        // 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(() => this._polyline = new google.maps.Polyline(options));
         this._polyline.setMap(this._map._googleMap);
         this._eventManager.setTarget(this._polyline);
       });

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

@@ -28,7 +28,7 @@ export declare class GoogleMap implements OnChanges, OnInit, OnDestroy {
     width: string | number;
     set zoom(zoom: number);
     zoomChanged: Observable<void>;
-    constructor(_elementRef: ElementRef,
+    constructor(_elementRef: ElementRef, _ngZone: NgZone,
     platformId?: Object);
     fitBounds(bounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral, padding?: number | google.maps.Padding): void;
     getBounds(): google.maps.LatLngBounds | null;
@@ -63,7 +63,7 @@ export declare class MapInfoWindow implements OnInit, OnDestroy {
     set position(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);
     close(): void;
     getContent(): string | Node;
     getPosition(): google.maps.LatLng | null;
@@ -103,7 +103,7 @@ export declare class MapMarker implements OnInit, OnDestroy {
     titleChanged: Observable<void>;
     visibleChanged: Observable<void>;
     zindexChanged: Observable<void>;
-    constructor(_googleMap: GoogleMap);
+    constructor(_googleMap: GoogleMap, _ngZone: NgZone);
     getAnimation(): google.maps.Animation | null;
     getClickable(): boolean;
     getCursor(): string | null;
@@ -137,7 +137,7 @@ 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);
     getDraggable(): boolean;
     getEditable(): boolean;
     getPath(): google.maps.MVCArray<google.maps.LatLng>;