fix(google-maps): sub-components throwing during server-side rendering (#18059)

Fixes the different map-related sub-components (marker, info window and polyline) throwing errors during server-side rendering.

Author: crisbeto

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

@@ -65,9 +65,6 @@ export const DEFAULT_WIDTH = '500px';
 })
 export class GoogleMap implements OnChanges, OnInit, OnDestroy {
   private _eventManager = new MapEventManager();
-
-  /** Whether we're currently rendering inside a browser. */
-  private _isBrowser: boolean;
   private _googleMapChanges: Observable<google.maps.Map>;
 
   private readonly _options = new BehaviorSubject<google.maps.MapOptions>(DEFAULT_OPTIONS);
@@ -78,6 +75,9 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
   private _mapEl: HTMLElement;
   _googleMap: UpdatedGoogleMap;
 
+  /** Whether we're currently rendering inside a browser. */
+  _isBrowser: boolean;
+
   @Input() height: string | number = DEFAULT_HEIGHT;
 
   @Input() width: string | number = DEFAULT_WIDTH;

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

@@ -90,14 +90,16 @@ export class MapInfoWindow implements OnInit, OnDestroy {
               private _elementRef: ElementRef<HTMLElement>) {}
 
   ngOnInit() {
-    this._combineOptions().pipe(takeUntil(this._destroy)).subscribe(options => {
-      if (this._infoWindow) {
-        this._infoWindow.setOptions(options);
-      } else {
-        this._infoWindow = new google.maps.InfoWindow(options);
-        this._eventManager.setTarget(this._infoWindow);
-      }
-    });
+    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);
+          this._eventManager.setTarget(this._infoWindow);
+        }
+      });
+    }
   }
 
   ngOnDestroy() {
@@ -147,7 +149,7 @@ export class MapInfoWindow implements OnInit, OnDestroy {
    */
   open(anchor?: MapMarker) {
     const marker = anchor ? anchor._marker : undefined;
-    if (this._googleMap._googleMap) {
+    if (this._googleMap._googleMap && this._infoWindow) {
       this._elementRef.nativeElement.style.display = '';
       this._infoWindow!.open(this._googleMap._googleMap, marker);
     }

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

@@ -239,19 +239,21 @@ export class MapMarker implements OnInit, OnDestroy {
   constructor(private readonly _googleMap: GoogleMap) {}
 
   ngOnInit() {
-    const combinedOptionsChanges = this._combineOptions();
-
-    combinedOptionsChanges.pipe(take(1)).subscribe(options => {
-      this._marker = new google.maps.Marker(options);
-      this._marker.setMap(this._googleMap._googleMap);
-      this._eventManager.setTarget(this._marker);
-    });
-
-    this._watchForOptionsChanges();
-    this._watchForTitleChanges();
-    this._watchForPositionChanges();
-    this._watchForLabelChanges();
-    this._watchForClickableChanges();
+    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);
+        this._eventManager.setTarget(this._marker);
+      });
+
+      this._watchForOptionsChanges();
+      this._watchForTitleChanges();
+      this._watchForPositionChanges();
+      this._watchForLabelChanges();
+      this._watchForClickableChanges();
+    }
   }
 
   ngOnDestroy() {

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

@@ -132,16 +132,18 @@ export class MapPolyline implements OnInit, OnDestroy {
   constructor(private readonly _map: GoogleMap) {}
 
   ngOnInit() {
-    const combinedOptionsChanges = this._combineOptions();
+    if (this._map._isBrowser) {
+      const combinedOptionsChanges = this._combineOptions();
 
-    combinedOptionsChanges.pipe(take(1)).subscribe(options => {
-      this._polyline = new google.maps.Polyline(options);
-      this._polyline.setMap(this._map._googleMap);
-      this._eventManager.setTarget(this._polyline);
-    });
+      combinedOptionsChanges.pipe(take(1)).subscribe(options => {
+        this._polyline = new google.maps.Polyline(options);
+        this._polyline.setMap(this._map._googleMap);
+        this._eventManager.setTarget(this._polyline);
+      });
 
-    this._watchForOptionsChanges();
-    this._watchForPathChanges();
+      this._watchForOptionsChanges();
+      this._watchForPathChanges();
+    }
   }
 
   ngOnDestroy() {
@@ -151,7 +153,9 @@ export class MapPolyline implements OnInit, OnDestroy {
     for (let listener of this._listeners) {
       listener.remove();
     }
-    this._polyline.setMap(null);
+    if (this._polyline) {
+      this._polyline.setMap(null);
+    }
   }
 
   /**

src/universal-app/kitchen-sink/kitchen-sink.html

@@ -384,4 +384,12 @@ <h2>YouTube player</h2>
 <youtube-player videoId="dQw4w9WgXcQ"></youtube-player>
 
 <h2>Google Map</h2>
-<google-map height="400px" width="750px"></google-map>
+<google-map height="400px" width="750px">
+  <map-marker [position]="{lat: 24, lng: 12}"></map-marker>
+  <map-info-window>Hello</map-info-window>
+  <map-polyline [options]="{
+    path: [{lat: 25, lng: 26}, {lat: 26, lng: 27}, {lat: 30, lng: 34}],
+    strokeColor: 'grey',
+    strokeOpacity: 0.8
+  }"></map-polyline>
+</google-map>

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

@@ -1,5 +1,6 @@
 export declare class GoogleMap implements OnChanges, OnInit, OnDestroy {
     _googleMap: UpdatedGoogleMap;
+    _isBrowser: boolean;
     boundsChanged: Observable<void>;
     center: google.maps.LatLngLiteral | google.maps.LatLng;
     centerChanged: Observable<void>;