fix(google-maps): server-side rendering error from map clusterer (#21049)

We have a guard around trying to initialize the clusterer on the server, but there's
some more logic in `ngAfterContentInit` that will end up throwing if it hasn't been
initialized.

Also adds a server-side rendering check.

Author: crisbeto

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

@@ -66,6 +66,9 @@ export class MapMarkerClusterer implements OnInit, AfterContentInit, OnDestroy {
   private readonly _eventManager = new MapEventManager(this._ngZone);
   private readonly _destroy = new Subject<void>();
 
+  /** Whether the clusterer is allowed to be initialized. */
+  private readonly _canInitialize: boolean;
+
   @Input()
   get ariaLabelFn(): AriaLabelFn {
     return this.markerClusterer ? this.markerClusterer.ariaLabelFn : () => '';
@@ -182,10 +185,12 @@ export class MapMarkerClusterer implements OnInit, AfterContentInit, OnDestroy {
    */
   markerClusterer?: MarkerClusterer;
 
-  constructor(private readonly _googleMap: GoogleMap, private readonly _ngZone: NgZone) {}
+  constructor(private readonly _googleMap: GoogleMap, private readonly _ngZone: NgZone) {
+    this._canInitialize = this._googleMap._isBrowser;
+  }
 
   ngOnInit() {
-    if (this._googleMap._isBrowser) {
+    if (this._canInitialize) {
       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
@@ -219,7 +224,9 @@ export class MapMarkerClusterer implements OnInit, AfterContentInit, OnDestroy {
   }
 
   ngAfterContentInit() {
-    this._watchForMarkerChanges();
+    if (this._canInitialize) {
+      this._watchForMarkerChanges();
+    }
   }
 
   ngOnDestroy() {

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

@@ -426,4 +426,10 @@ <h2>Google Map</h2>
     <map-traffic-layer></map-traffic-layer>
     <map-transit-layer></map-transit-layer>
     <map-bicycling-layer></map-bicycling-layer>
+
+    <map-marker-clusterer imagePath="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m">
+      <map-marker [position]="{lat: 24, lng: 12}"></map-marker>
+      <map-marker [position]="{lat: 12, lng: 24}"></map-marker>
+      <map-marker [position]="{lat: 12, lng: 12}"></map-marker>
+    </map-marker-clusterer>
 </google-map>