feat(google-maps): Add layer components

Add a base class for the transit and bicycling layers.

Author: mbehrlich

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

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+// Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
+/// <reference types="googlemaps" />
+
+import {Directive, NgZone, OnDestroy, OnInit} from '@angular/core';
+
+import {GoogleMap} from './google-map/google-map';
+
+@Directive({
+  selector: 'map-base-layer',
+  exportAs: 'mapBaseLayer',
+})
+export class MapBaseLayer implements OnInit, OnDestroy {
+  constructor(protected readonly _map: GoogleMap, protected readonly _ngZone: NgZone) {}
+
+  ngOnInit() {
+    if (this._map._isBrowser) {
+      this._ngZone.runOutsideAngular(() => {
+        this._initializeObject();
+      });
+      this._assertInitialized();
+      this._setMap();
+    }
+  }
+
+  ngOnDestroy() {
+    this._unsetMap();
+  }
+
+  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,9 +9,9 @@
 // Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
 /// <reference types="googlemaps" />
 
-import {Directive, NgZone, OnDestroy, OnInit} from '@angular/core';
+import {Directive} from '@angular/core';
 
-import {GoogleMap} from '../google-map/google-map';
+import {MapBaseLayer} from '../map-base-layer';
 
 /**
  * Angular component that renders a Google Maps Bicycling Layer via the Google Maps JavaScript API.
@@ -22,43 +22,34 @@ import {GoogleMap} from '../google-map/google-map';
   selector: 'map-bicycling-layer',
   exportAs: 'mapBicyclingLayer',
 })
-export class MapBicyclingLayer implements OnInit, OnDestroy {
+export class MapBicyclingLayer extends MapBaseLayer {
   /**
    * The underlying google.maps.BicyclingLayer object.
    *
    * See developers.google.com/maps/documentation/javascript/reference/map#BicyclingLayer
    */
   bicyclingLayer?: google.maps.BicyclingLayer;
 
-  constructor(private readonly _map: GoogleMap, private readonly _ngZone: NgZone) {}
+  protected _initializeObject() {
+    this.bicyclingLayer = new google.maps.BicyclingLayer();
+  }
 
-  ngOnInit() {
-    if (this._map._isBrowser) {
-      // Create the object outside the zone so its events don't trigger change detection.
-      this._ngZone.runOutsideAngular(() => {
-        this.bicyclingLayer = new google.maps.BicyclingLayer();
-      });
-      this._assertInitialized();
-      this.bicyclingLayer.setMap(this._map.googleMap!);
-    }
+  protected _setMap() {
+    this._assertLayerInitialized();
+    this.bicyclingLayer.setMap(this._map.googleMap!);
   }
 
-  ngOnDestroy() {
+  protected _unsetMap() {
     if (this.bicyclingLayer) {
       this.bicyclingLayer.setMap(null);
     }
   }
 
-  private _assertInitialized(): asserts this is {bicyclingLayer: google.maps.BicyclingLayer} {
-    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.');
-    }
+  private _assertLayerInitialized(): asserts this is {bicyclingLayer: google.maps.BicyclingLayer} {
     if (!this.bicyclingLayer) {
       throw Error(
           'Cannot interact with a Google Map Bicycling Layer before it has been initialized. ' +
-          'Please wait for the Bicycling Layer to load before trying to interact with it.');
+          'Please wait for the Transit Layer to load before trying to interact with it.');
     }
   }
 }

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

@@ -9,9 +9,9 @@
 // Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
 /// <reference types="googlemaps" />
 
-import {Directive, NgZone, OnDestroy, OnInit} from '@angular/core';
+import {Directive} from '@angular/core';
 
-import {GoogleMap} from '../google-map/google-map';
+import {MapBaseLayer} from '../map-base-layer';
 
 /**
  * Angular component that renders a Google Maps Transit Layer via the Google Maps JavaScript API.
@@ -22,39 +22,30 @@ import {GoogleMap} from '../google-map/google-map';
   selector: 'map-transit-layer',
   exportAs: 'mapTransitLayer',
 })
-export class MapTransitLayer implements OnInit, OnDestroy {
+export class MapTransitLayer extends MapBaseLayer {
   /**
    * The underlying google.maps.TransitLayer object.
    *
    * See developers.google.com/maps/documentation/javascript/reference/map#TransitLayer
    */
   transitLayer?: google.maps.TransitLayer;
 
-  constructor(private readonly _map: GoogleMap, private readonly _ngZone: NgZone) {}
+  protected _initializeObject() {
+    this.transitLayer = new google.maps.TransitLayer();
+  }
 
-  ngOnInit() {
-    if (this._map._isBrowser) {
-      // Create the object outside the zone so its events don't trigger change detection.
-      this._ngZone.runOutsideAngular(() => {
-        this.transitLayer = new google.maps.TransitLayer();
-      });
-      this._assertInitialized();
-      this.transitLayer.setMap(this._map.googleMap!);
-    }
+  protected _setMap() {
+    this._assertLayerInitialized();
+    this.transitLayer.setMap(this._map.googleMap!);
   }
 
-  ngOnDestroy() {
+  protected _unsetMap() {
     if (this.transitLayer) {
       this.transitLayer.setMap(null);
     }
   }
 
-  private _assertInitialized(): asserts this is {transitLayer: google.maps.TransitLayer} {
-    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.');
-    }
+  private _assertLayerInitialized(): asserts this is {transitLayer: google.maps.TransitLayer} {
     if (!this.transitLayer) {
       throw Error(
           'Cannot interact with a Google Map Transit Layer before it has been initialized. ' +