fix(google-maps): server-side rendering error for polygon and rectangle components (#18573)

Fixes a server-side rendering error being thrown if a polygon or rectangle is used.

Author: crisbeto

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

@@ -243,9 +243,7 @@ export class MapMarker implements OnInit, OnDestroy {
 
   ngOnInit() {
     if (this._googleMap._isBrowser) {
-      const combinedOptionsChanges = this._combineOptions();
-
-      combinedOptionsChanges.pipe(take(1)).subscribe(options => {
+      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.

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

@@ -134,28 +134,30 @@ export class MapPolygon 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._polygon = new google.maps.Polygon(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._polygon = new google.maps.Polygon(options);
+        });
+        this._polygon.setMap(this._map._googleMap);
+        this._eventManager.setTarget(this._polygon);
       });
-      this._polygon.setMap(this._map._googleMap);
-      this._eventManager.setTarget(this._polygon);
-    });
 
-    this._watchForOptionsChanges();
-    this._watchForPathChanges();
+      this._watchForOptionsChanges();
+      this._watchForPathChanges();
+    }
   }
 
   ngOnDestroy() {
     this._eventManager.destroy();
     this._destroyed.next();
     this._destroyed.complete();
-    this._polygon.setMap(null);
+    if (this._polygon) {
+      this._polygon.setMap(null);
+    }
   }
 
   /**

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

@@ -135,9 +135,7 @@ export class MapPolyline implements OnInit, OnDestroy {
 
   ngOnInit() {
     if (this._map._isBrowser) {
-      const combinedOptionsChanges = this._combineOptions();
-
-      combinedOptionsChanges.pipe(take(1)).subscribe(options => {
+      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.

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

@@ -142,28 +142,30 @@ export class MapRectangle 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._rectangle = new google.maps.Rectangle(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._rectangle = new google.maps.Rectangle(options);
+        });
+        this._rectangle.setMap(this._map._googleMap);
+        this._eventManager.setTarget(this._rectangle);
       });
-      this._rectangle.setMap(this._map._googleMap);
-      this._eventManager.setTarget(this._rectangle);
-    });
 
-    this._watchForOptionsChanges();
-    this._watchForBoundsChanges();
+      this._watchForOptionsChanges();
+      this._watchForBoundsChanges();
+    }
   }
 
   ngOnDestroy() {
     this._eventManager.destroy();
     this._destroyed.next();
     this._destroyed.complete();
-    this._rectangle.setMap(null);
+    if (this._rectangle) {
+      this._rectangle.setMap(null);
+    }
   }
 
   /**

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

@@ -375,7 +375,7 @@ <h2>Drag and Drop</h2>
 <h2>Virtual scroll</h2>
 
 <cdk-virtual-scroll-viewport itemSize="50" class="universal-viewport">
-  <div *cdkVirtualFor="let size of virtualScrollData; let i = index" style="height: 50px">
+  <div *cdkVirtualFor="let size of virtualScrollData; let i = index" style="height: 50px;">
     Item #{{i}}
   </div>
 </cdk-virtual-scroll-viewport>
@@ -392,4 +392,14 @@ <h2>Google Map</h2>
     strokeColor: 'grey',
     strokeOpacity: 0.8
   }"></map-polyline>
+  <map-polygon [options]="{
+    paths: [{lat: 20, lng: 21}, {lat: 22, lng: 23}, {lat: 24, lng: 25}],
+    strokeColor: 'grey',
+    strokeOpacity: 0.8
+  }"></map-polygon>
+  <map-rectangle [options]="{
+    bounds: {east: 30, north: 15, west: 10, south: -5},
+    strokeColor: 'grey',
+    strokeOpacity: 0.8
+  }"></map-rectangle>
 </google-map>