feat(google): Expose the underlying Google Maps objects

Fix merge conflicts and update the Circle component with changes.

Author: mbehrlich

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

@@ -2,7 +2,7 @@ import {Component, ViewChild} from '@angular/core';
 import {async, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 
-import {DEFAULT_OPTIONS, UpdatedGoogleMap} from '../google-map/google-map';
+import {DEFAULT_OPTIONS} from '../google-map/google-map';
 import {GoogleMapsModule} from '../google-maps-module';
 import {
   createCircleConstructorSpy,
@@ -15,7 +15,7 @@ import {
 import {MapCircle} from './map-circle';
 
 describe('MapCircle', () => {
-  let mapSpy: jasmine.SpyObj<UpdatedGoogleMap>;
+  let mapSpy: jasmine.SpyObj<google.maps.Map>;
   let circleCenter: google.maps.LatLngLiteral;
   let circleRadius: number;
   let circleOptions: google.maps.CircleOptions;

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

@@ -37,7 +37,7 @@ export class MapCircle implements OnInit, OnDestroy {
    *
    * @see developers.google.com/maps/documentation/javascript/reference/polygon#Circle
    */
-  circle: google.maps.Circle;  // initialized in ngOnInit
+  circle?: google.maps.Circle;  // initialized in ngOnInit
 
   @Input()
   set options(options: google.maps.CircleOptions) {
@@ -159,77 +159,86 @@ export class MapCircle implements OnInit, OnDestroy {
   constructor(private readonly _map: GoogleMap, private readonly _ngZone: NgZone) {}
 
   ngOnInit() {
-    const combinedOptionsChanges = this._combineOptions();
-
-    combinedOptionsChanges.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(() => {
-        this.circle = new google.maps.Circle(options);
+    if (this._map._isBrowser) {
+      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(() => {
+          this.circle = new google.maps.Circle(options);
+        });
+        this._assertInitialized();
+        this.circle!.setMap(this._map.googleMap!);
+        this._eventManager.setTarget(this.circle);
       });
-      this.circle.setMap(this._map._googleMap);
-      this._eventManager.setTarget(this.circle);
-    });
 
-    this._watchForOptionsChanges();
-    this._watchForCenterChanges();
-    this._watchForRadiusChanges();
+      this._watchForOptionsChanges();
+      this._watchForCenterChanges();
+      this._watchForRadiusChanges();
+    }
   }
 
   ngOnDestroy() {
     this._eventManager.destroy();
     this._destroyed.next();
     this._destroyed.complete();
-    this.circle.setMap(null);
+    if (this.circle) {
+      this.circle.setMap(null);
+    }
   }
 
   /**
    * @see
    * developers.google.com/maps/documentation/javascript/reference/polygon#Circle.getBounds
    */
   getBounds(): google.maps.LatLngBounds {
-    return this.circle.getBounds();
+    this._assertInitialized();
+    return this.circle!.getBounds();
   }
 
   /**
    * @see
    * developers.google.com/maps/documentation/javascript/reference/polygon#Circle.getCenter
    */
   getCenter(): google.maps.LatLng {
-    return this.circle.getCenter();
+    this._assertInitialized();
+    return this.circle!.getCenter();
   }
 
   /**
    * @see
    * developers.google.com/maps/documentation/javascript/reference/polygon#Circle.getDraggable
    */
   getDraggable(): boolean {
-    return this.circle.getDraggable();
+    this._assertInitialized();
+    return this.circle!.getDraggable();
   }
 
   /**
    * @see
    * developers.google.com/maps/documentation/javascript/reference/polygon#Circle.getEditable
    */
   getEditable(): boolean {
-    return this.circle.getEditable();
+    this._assertInitialized();
+    return this.circle!.getEditable();
   }
 
   /**
    * @see
    * developers.google.com/maps/documentation/javascript/reference/polygon#Circle.getCenter
    */
   getRadius(): number {
-    return this.circle.getRadius();
+    this._assertInitialized();
+    return this.circle!.getRadius();
   }
 
   /**
    * @see
    * developers.google.com/maps/documentation/javascript/reference/polygon#Circle.getVisible
    */
   getVisible(): boolean {
-    return this.circle.getVisible();
+    this._assertInitialized();
+    return this.circle!.getVisible();
   }
 
   private _combineOptions(): Observable<google.maps.CircleOptions> {
@@ -246,23 +255,39 @@ export class MapCircle implements OnInit, OnDestroy {
 
   private _watchForOptionsChanges() {
     this._options.pipe(takeUntil(this._destroyed)).subscribe(options => {
-      this.circle.setOptions(options);
+      this._assertInitialized();
+      this.circle!.setOptions(options);
     });
   }
 
   private _watchForCenterChanges() {
     this._center.pipe(takeUntil(this._destroyed)).subscribe(center => {
       if (center) {
-        this.circle.setCenter(center);
+        this._assertInitialized();
+        this.circle!.setCenter(center);
       }
     });
   }
 
   private _watchForRadiusChanges() {
     this._radius.pipe(takeUntil(this._destroyed)).subscribe(radius => {
       if (radius !== undefined) {
-        this.circle.setRadius(radius);
+        this._assertInitialized();
+        this.circle!.setRadius(radius);
       }
     });
   }
+
+  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.');
+    }
+    if (!this.circle) {
+      throw Error(
+        'Cannot interact with a Google Map Circle before it has been ' +
+        'initialized. Please wait for the Circle to load before trying to interact with it.');
+    }
+  }
 }