refactor(google-maps): reduce breaking changes from importLibrary introduction

Reworks the Google Maps components to reduce the amount of breakages due to the initialization now being asynchronous.

Author: crisbeto

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

@@ -309,16 +309,26 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
       // 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(async () => {
-        const mapConstructor =
-          google.maps.Map || (await importLibrary<google.maps.Map>('maps', 'Map'));
-        this.googleMap = new mapConstructor(this._mapEl, this._combineOptions());
-        this._eventManager.setTarget(this.googleMap);
-        this.mapInitialized.emit(this.googleMap);
-      });
+      if (google.maps.Map) {
+        this._initialize(google.maps.Map);
+      } else {
+        this._ngZone.runOutsideAngular(() => {
+          importLibrary<typeof google.maps.Map>('maps', 'Map').then(mapConstructor =>
+            this._initialize(mapConstructor),
+          );
+        });
+      }
     }
   }
 
+  private _initialize(mapConstructor: typeof google.maps.Map) {
+    this._ngZone.runOutsideAngular(() => {
+      this.googleMap = new mapConstructor(this._mapEl, this._combineOptions());
+      this._eventManager.setTarget(this.googleMap);
+      this.mapInitialized.emit(this.googleMap);
+    });
+  }
+
   ngOnDestroy() {
     this.mapInitialized.complete();
     this._eventManager.destroy();
@@ -489,8 +499,10 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
   }
 
   /** Returns a promise that resolves when the map has been initialized. */
-  async _resolveMap(): Promise<google.maps.Map> {
-    return this.googleMap || this.mapInitialized.pipe(take(1)).toPromise();
+  _resolveMap(): Promise<google.maps.Map> {
+    return this.googleMap
+      ? Promise.resolve(this.googleMap)
+      : this.mapInitialized.pipe(take(1)).toPromise();
   }
 
   private _setSize() {

src/google-maps/import-library.ts

@@ -7,9 +7,8 @@
  */
 
 /** Imports a Google Maps library. */
-export async function importLibrary<T>(name: string, symbol: string): Promise<T> {
+export function importLibrary<T>(name: string, symbol: string): Promise<T> {
   // TODO(crisbeto): needs to cast to `any` to avoid some internal limitations around typings.
   // Should be cleaned up eventually.
-  const library = await (window as any).google.maps.importLibrary(name);
-  return library[symbol];
+  return (window as any).google.maps.importLibrary(name).then((library: any) => library[symbol]);
 }

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

@@ -26,19 +26,28 @@ export class MapBaseLayer implements OnInit, OnDestroy {
 
   ngOnInit() {
     if (this._map._isBrowser) {
-      this._ngZone.runOutsideAngular(async () => {
-        const map = await this._map._resolveMap();
-        await this._initializeObject();
-        this._setMap(map);
+      this._ngZone.runOutsideAngular(() => {
+        this._initializeObject();
       });
+      this._assertInitialized();
+      this._setMap();
     }
   }
 
   ngOnDestroy() {
     this._unsetMap();
   }
 
-  protected async _initializeObject() {}
-  protected _setMap(_map: google.maps.Map) {}
+  private _assertInitialized() {
+    if (!this._map.googleMap) {
+      throw Error(
+        'Cannot access Google Map information before the API has been initialized. ' +
+          'Please wait for the API to load before trying to interact with it.',
+      );
+    }
+  }
+
+  protected _initializeObject() {}
+  protected _setMap() {}
   protected _unsetMap() {}
 }

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

@@ -9,10 +9,10 @@
 // Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
 /// <reference types="google.maps" />
 
-import {Directive, EventEmitter, Output} from '@angular/core';
+import {Directive, EventEmitter, NgZone, OnDestroy, OnInit, Output, inject} from '@angular/core';
 
-import {MapBaseLayer} from '../map-base-layer';
 import {importLibrary} from '../import-library';
+import {GoogleMap} from '../google-map/google-map';
 
 /**
  * Angular component that renders a Google Maps Bicycling Layer via the Google Maps JavaScript API.
@@ -24,7 +24,10 @@ import {importLibrary} from '../import-library';
   exportAs: 'mapBicyclingLayer',
   standalone: true,
 })
-export class MapBicyclingLayer extends MapBaseLayer {
+export class MapBicyclingLayer implements OnInit, OnDestroy {
+  private _map = inject(GoogleMap);
+  private _zone = inject(NgZone);
+
   /**
    * The underlying google.maps.BicyclingLayer object.
    *
@@ -36,20 +39,33 @@ export class MapBicyclingLayer extends MapBaseLayer {
   @Output() readonly bicyclingLayerInitialized: EventEmitter<google.maps.BicyclingLayer> =
     new EventEmitter<google.maps.BicyclingLayer>();
 
-  protected override async _initializeObject() {
-    const layerConstructor =
-      google.maps.BicyclingLayer ||
-      (await importLibrary<google.maps.BicyclingLayer>('maps', 'BicyclingLayer'));
-    this.bicyclingLayer = new layerConstructor();
-    this.bicyclingLayerInitialized.emit(this.bicyclingLayer);
+  ngOnInit(): void {
+    if (this._map._isBrowser) {
+      if (google.maps.BicyclingLayer && this._map.googleMap) {
+        this._initialize(this._map.googleMap, google.maps.BicyclingLayer);
+      } else {
+        this._zone.runOutsideAngular(() => {
+          Promise.all([
+            this._map._resolveMap(),
+            importLibrary<typeof google.maps.BicyclingLayer>('maps', 'BicyclingLayer'),
+          ]).then(([map, layerConstructor]) => {
+            this._initialize(map, layerConstructor);
+          });
+        });
+      }
+    }
   }
 
-  protected override _setMap(map: google.maps.Map) {
-    this._assertLayerInitialized();
-    this.bicyclingLayer.setMap(map);
+  private _initialize(map: google.maps.Map, layerConstructor: typeof google.maps.BicyclingLayer) {
+    this._zone.runOutsideAngular(() => {
+      this.bicyclingLayer = new layerConstructor();
+      this.bicyclingLayerInitialized.emit(this.bicyclingLayer);
+      this._assertLayerInitialized();
+      this.bicyclingLayer.setMap(map);
+    });
   }
 
-  protected override _unsetMap() {
+  ngOnDestroy() {
     this.bicyclingLayer?.setMap(null);
   }
 

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

@@ -175,25 +175,41 @@ export class MapCircle implements OnInit, OnDestroy {
     this._combineOptions()
       .pipe(take(1))
       .subscribe(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(async () => {
-          const map = await this._map._resolveMap();
-          const circleConstructor =
-            google.maps.Circle || (await importLibrary<google.maps.Circle>('maps', 'Circle'));
-          this.circle = new circleConstructor(options);
-          this._assertInitialized();
-          this.circle.setMap(map);
-          this._eventManager.setTarget(this.circle);
-          this.circleInitialized.emit(this.circle);
-          this._watchForOptionsChanges();
-          this._watchForCenterChanges();
-          this._watchForRadiusChanges();
-        });
+        if (google.maps.Circle && this._map.googleMap) {
+          this._initialize(this._map.googleMap, google.maps.Circle, options);
+        } else {
+          this._ngZone.runOutsideAngular(() => {
+            Promise.all([
+              this._map._resolveMap(),
+              importLibrary<typeof google.maps.Circle>('maps', 'Circle'),
+            ]).then(([map, circleConstructor]) => {
+              this._initialize(map, circleConstructor, options);
+            });
+          });
+        }
       });
   }
 
+  private _initialize(
+    map: google.maps.Map,
+    circleConstructor: typeof google.maps.Circle,
+    options: google.maps.CircleOptions,
+  ) {
+    // 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.circle = new circleConstructor(options);
+      this._assertInitialized();
+      this.circle.setMap(map);
+      this._eventManager.setTarget(this.circle);
+      this.circleInitialized.emit(this.circle);
+      this._watchForOptionsChanges();
+      this._watchForCenterChanges();
+      this._watchForRadiusChanges();
+    });
+  }
+
   ngOnDestroy() {
     this._eventManager.destroy();
     this._destroyed.next();

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

@@ -82,23 +82,37 @@ export class MapDirectionsRenderer implements OnInit, OnChanges, OnDestroy {
 
   ngOnInit() {
     if (this._googleMap._isBrowser) {
-      // 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(async () => {
-        const map = await this._googleMap._resolveMap();
-        const rendererConstructor =
-          google.maps.DirectionsRenderer ||
-          (await importLibrary<google.maps.DirectionsRenderer>('routes', 'DirectionsRenderer'));
-        this.directionsRenderer = new rendererConstructor(this._combineOptions());
-        this._assertInitialized();
-        this.directionsRenderer.setMap(map);
-        this._eventManager.setTarget(this.directionsRenderer);
-        this.directionsRendererInitialized.emit(this.directionsRenderer);
-      });
+      if (google.maps.DirectionsRenderer && this._googleMap.googleMap) {
+        this._initialize(this._googleMap.googleMap, google.maps.DirectionsRenderer);
+      } else {
+        this._ngZone.runOutsideAngular(() => {
+          Promise.all([
+            this._googleMap._resolveMap(),
+            importLibrary<typeof google.maps.DirectionsRenderer>('routes', 'DirectionsRenderer'),
+          ]).then(([map, rendererConstructor]) => {
+            this._initialize(map, rendererConstructor);
+          });
+        });
+      }
     }
   }
 
+  private _initialize(
+    map: google.maps.Map,
+    rendererConstructor: typeof google.maps.DirectionsRenderer,
+  ) {
+    // 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.directionsRenderer = new rendererConstructor(this._combineOptions());
+      this._assertInitialized();
+      this.directionsRenderer.setMap(map);
+      this._eventManager.setTarget(this.directionsRenderer);
+      this.directionsRendererInitialized.emit(this.directionsRenderer);
+    });
+  }
+
   ngOnChanges(changes: SimpleChanges) {
     if (this.directionsRenderer) {
       if (changes['options']) {

src/google-maps/map-directions-renderer/map-directions-service.ts

@@ -48,14 +48,21 @@ export class MapDirectionsService {
     });
   }
 
-  private async _getService(): Promise<google.maps.DirectionsService> {
+  private _getService(): Promise<google.maps.DirectionsService> {
     if (!this._directionsService) {
-      const serviceConstructor =
-        google.maps.DirectionsService ||
-        (await importLibrary<google.maps.DirectionsService>('routes', 'DirectionsService'));
-      this._directionsService = new serviceConstructor();
+      if (google.maps.DirectionsService) {
+        this._directionsService = new google.maps.DirectionsService();
+      } else {
+        return importLibrary<typeof google.maps.DirectionsService>(
+          'routes',
+          'DirectionsService',
+        ).then(serviceConstructor => {
+          this._directionsService = new serviceConstructor();
+          return this._directionsService;
+        });
+      }
     }
 
-    return this._directionsService;
+    return Promise.resolve(this._directionsService);
   }
 }

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

@@ -44,14 +44,20 @@ export class MapGeocoder {
     });
   }
 
-  private async _getGeocoder(): Promise<google.maps.Geocoder> {
+  private _getGeocoder(): Promise<google.maps.Geocoder> {
     if (!this._geocoder) {
-      const geocoderConstructor =
-        google.maps.Geocoder ||
-        (await importLibrary<google.maps.Geocoder>('geocoding', 'Geocoder'));
-      this._geocoder = new geocoderConstructor();
+      if (google.maps.Geocoder) {
+        this._geocoder = new google.maps.Geocoder();
+      } else {
+        return importLibrary<typeof google.maps.Geocoder>('geocoding', 'Geocoder').then(
+          geocoderConstructor => {
+            this._geocoder = new geocoderConstructor();
+            return this._geocoder;
+          },
+        );
+      }
     }
 
-    return this._geocoder;
+    return Promise.resolve(this._geocoder);
   }
 }