From 6275200e0d4724aa86319ae772f395709406aec7 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Fri, 13 Mar 2020 21:46:16 +0100
Subject: [PATCH] fix(google-maps): map circle error during server-side
 rendering

Fixes the `map-circle` component throwing an error during server-side rendering.
---
 src/google-maps/map-circle/map-circle.ts      | 33 ++++++++++---------
 .../kitchen-sink/kitchen-sink.html            |  6 ++++
 2 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/src/google-maps/map-circle/map-circle.ts b/src/google-maps/map-circle/map-circle.ts
index 4e0cff977637..3772aec0204b 100644
--- a/src/google-maps/map-circle/map-circle.ts
+++ b/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);
+    }
   }
 
   /**
diff --git a/src/universal-app/kitchen-sink/kitchen-sink.html b/src/universal-app/kitchen-sink/kitchen-sink.html
index 6a25ba50a688..d9d5b1d47c46 100644
--- a/src/universal-app/kitchen-sink/kitchen-sink.html
+++ b/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>