fix(google-maps): avoid errors when accessing API too early (#18376)

Fixes a bunch of errors that are thrown if we access the Google Maps-dependent methods before the API has loaded. We had everything typed correctly, but in all cases we were overriding the null checks.

Author: crisbeto

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

@@ -131,7 +131,7 @@ export class MapInfoWindow implements OnInit, OnDestroy {
    * developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindow.getContent
    */
   getContent(): string|Node {
-    return this._infoWindow!.getContent();
+    return this._infoWindow ? this._infoWindow.getContent() : '';
   }
 
   /**
@@ -140,15 +140,15 @@ export class MapInfoWindow implements OnInit, OnDestroy {
    * #InfoWindow.getPosition
    */
   getPosition(): google.maps.LatLng|null {
-    return this._infoWindow!.getPosition() || null;
+    return this._infoWindow ? this._infoWindow.getPosition() : null;
   }
 
   /**
    * See
    * developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindow.getZIndex
    */
   getZIndex(): number {
-    return this._infoWindow!.getZIndex();
+    return this._infoWindow ? this._infoWindow.getZIndex() : -1;
   }
 
   /**

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

@@ -276,95 +276,95 @@ export class MapMarker implements OnInit, OnDestroy {
    * developers.google.com/maps/documentation/javascript/reference/marker#Marker.getAnimation
    */
   getAnimation(): google.maps.Animation|null {
-    return this._marker!.getAnimation() || null;
+    return (this._marker && this._marker.getAnimation()) || null;
   }
 
   /**
    * See
    * developers.google.com/maps/documentation/javascript/reference/marker#Marker.getClickable
    */
   getClickable(): boolean {
-    return this._marker!.getClickable();
+    return this._marker ? this._marker.getClickable() : false;
   }
 
   /**
    * See
    * developers.google.com/maps/documentation/javascript/reference/marker#Marker.getCursor
    */
   getCursor(): string|null {
-    return this._marker!.getCursor() || null;
+    return (this._marker && this._marker.getCursor()) || null;
   }
 
   /**
    * See
    * developers.google.com/maps/documentation/javascript/reference/marker#Marker.getDraggable
    */
   getDraggable(): boolean {
-    return !!this._marker!.getDraggable();
+    return this._marker ? !!this._marker.getDraggable() : false;
   }
 
   /**
    * See
    * developers.google.com/maps/documentation/javascript/reference/marker#Marker.getIcon
    */
   getIcon(): string|google.maps.Icon|google.maps.Symbol|null {
-    return this._marker!.getIcon() || null;
+    return (this._marker && this._marker.getIcon()) || null;
   }
 
   /**
    * See
    * developers.google.com/maps/documentation/javascript/reference/marker#Marker.getLabel
    */
   getLabel(): google.maps.MarkerLabel|null {
-    return this._marker!.getLabel() || null;
+    return (this._marker && this._marker.getLabel()) || null;
   }
 
   /**
    * See
    * developers.google.com/maps/documentation/javascript/reference/marker#Marker.getOpacity
    */
   getOpacity(): number|null {
-    return this._marker!.getOpacity() || null;
+    return (this._marker && this._marker.getOpacity()) || null;
   }
 
   /**
    * See
    * developers.google.com/maps/documentation/javascript/reference/marker#Marker.getPosition
    */
   getPosition(): google.maps.LatLng|null {
-    return this._marker!.getPosition() || null;
+    return (this._marker && this._marker.getPosition()) || null;
   }
 
   /**
    * See
    * developers.google.com/maps/documentation/javascript/reference/marker#Marker.getShape
    */
   getShape(): google.maps.MarkerShape|null {
-    return this._marker!.getShape() || null;
+    return (this._marker && this._marker.getShape()) || null;
   }
 
   /**
    * See
    * developers.google.com/maps/documentation/javascript/reference/marker#Marker.getTitle
    */
   getTitle(): string|null {
-    return this._marker!.getTitle() || null;
+    return (this._marker && this._marker.getTitle()) || null;
   }
 
   /**
    * See
    * developers.google.com/maps/documentation/javascript/reference/marker#Marker.getVisible
    */
   getVisible(): boolean {
-    return this._marker!.getVisible();
+    return this._marker ? this._marker.getVisible() : false;
   }
 
   /**
    * See
    * developers.google.com/maps/documentation/javascript/reference/marker#Marker.getZIndex
    */
   getZIndex(): number|null {
-    return this._marker!.getZIndex() || null;
+    return (this._marker && this._marker.getZIndex()) || null;
   }
 
   private _combineOptions(): Observable<google.maps.MarkerOptions> {

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

@@ -39,7 +39,7 @@ export class MapPolyline implements OnInit, OnDestroy {
 
   private readonly _destroyed = new Subject<void>();
 
-  _polyline: google.maps.Polyline; // initialized in ngOnInit
+  _polyline?: google.maps.Polyline; // initialized in ngOnInit
 
   @Input()
   set options(options: google.maps.PolylineOptions) {
@@ -142,7 +142,7 @@ export class MapPolyline implements OnInit, OnDestroy {
         // 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._polyline!.setMap(this._map._googleMap);
         this._eventManager.setTarget(this._polyline);
       });
 
@@ -165,28 +165,29 @@ export class MapPolyline implements OnInit, OnDestroy {
    * developers.google.com/maps/documentation/javascript/reference/polygon#Polyline.getDraggable
    */
   getDraggable(): boolean {
-    return this._polyline.getDraggable();
+    return this._polyline ? this._polyline.getDraggable() : false;
   }
 
   /**
    * @see developers.google.com/maps/documentation/javascript/reference/polygon#Polyline.getEditable
    */
   getEditable(): boolean {
-    return this._polyline.getEditable();
+    return this._polyline ? this._polyline.getEditable() : false;
   }
 
   /**
    * @see developers.google.com/maps/documentation/javascript/reference/polygon#Polyline.getPath
    */
   getPath(): google.maps.MVCArray<google.maps.LatLng> {
-    return this._polyline.getPath();
+    // @breaking-change 11.0.0 Make the return value nullable.
+    return this._polyline ? this._polyline.getPath() : null!;
   }
 
   /**
    * @see developers.google.com/maps/documentation/javascript/reference/polygon#Polyline.getVisible
    */
   getVisible(): boolean {
-    return this._polyline.getVisible();
+    return this._polyline ? this._polyline.getVisible() : false;
   }
 
   private _combineOptions(): Observable<google.maps.PolylineOptions> {
@@ -201,13 +202,15 @@ export class MapPolyline implements OnInit, OnDestroy {
 
   private _watchForOptionsChanges() {
     this._options.pipe(takeUntil(this._destroyed)).subscribe(options => {
-      this._polyline.setOptions(options);
+      if (this._polyline) {
+        this._polyline.setOptions(options);
+      }
     });
   }
 
   private _watchForPathChanges() {
     this._path.pipe(takeUntil(this._destroyed)).subscribe(path => {
-      if (path) {
+      if (path && this._polyline) {
         this._polyline.setPath(path);
       }
     });

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

@@ -150,7 +150,7 @@ export declare class MapPolygon implements OnInit, OnDestroy {
 }
 
 export declare class MapPolyline implements OnInit, OnDestroy {
-    _polyline: google.maps.Polyline;
+    _polyline?: google.maps.Polyline;
     set options(options: google.maps.PolylineOptions);
     set path(path: google.maps.MVCArray<google.maps.LatLng> | google.maps.LatLng[] | google.maps.LatLngLiteral[]);
     polylineClick: Observable<google.maps.PolyMouseEvent>;