fix(google-maps): map circle error during server-side rendering (#18822)

Fixes the `map-circle` component throwing an error during server-side rendering.

Author: crisbeto

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

@@ -159,29 +159,32 @@ 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.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);
+    }
   }
 
   /**

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

@@ -402,4 +402,10 @@ <h2>Google Map</h2>
     strokeColor: 'grey',
     strokeOpacity: 0.8
   }"></map-rectangle>
+  <map-circle [options]="{
+    center: {lat: 19, lng: 20},
+    radius: 500000,
+    strokeColor: 'grey',
+    strokeOpacity: 0.8
+  }"></map-circle>
 </google-map>