fix(google-maps): throw an error if clustering library hasn't been loaded (#23064)

Clustering in the Google Maps module requires a separate library, but we never check it's actually been loaded. These changes add an error to make it easier to debug.

Relates to #23050.

(cherry picked from commit cd9f5eb)

Author: crisbeto

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

@@ -48,6 +48,19 @@ describe('MapMarkerClusterer', () => {
 
   afterEach(() => {
     (window.google as any) = undefined;
+    (window as any).MarkerClusterer = undefined;
+  });
+
+  it('throws an error if the clustering library has not been loaded', () => {
+    (window as any).MarkerClusterer = undefined;
+    markerClustererConstructorSpy = createMarkerClustererConstructorSpy(markerClustererSpy, false)
+        .and.callThrough();
+
+    expect(() => fixture.detectChanges())
+        .toThrow(new Error(
+          'MarkerClusterer class not found, cannot construct a marker cluster. ' +
+          'Please install the MarkerClustererPlus library: ' +
+          'https://github.com/googlemaps/js-markerclustererplus'));
   });
 
   it('initializes a Google Map Marker Clusterer', () => {

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

@@ -198,6 +198,16 @@ export class MapMarkerClusterer implements OnInit, AfterContentInit, OnChanges,
 
   ngOnInit() {
     if (this._canInitialize) {
+      const clustererWindow =
+        window as unknown as typeof globalThis & {MarkerClusterer?: MarkerClusterer};
+
+      if (!clustererWindow.MarkerClusterer && (typeof ngDevMode === 'undefined' || ngDevMode)) {
+        throw Error(
+            'MarkerClusterer class not found, cannot construct a marker cluster. ' +
+            'Please install the MarkerClustererPlus library: ' +
+            'https://github.com/googlemaps/js-markerclustererplus');
+      }
+
       // 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/testing/fake-google-map-utils.ts

@@ -442,13 +442,15 @@ export function createMarkerClustererSpy(): jasmine.SpyObj<MarkerClusterer> {
 
 /** Creates a jasmine.Spy to watch for the constructor of a MarkerClusterer */
 export function createMarkerClustererConstructorSpy(
-  markerClustererSpy: jasmine.SpyObj<MarkerClusterer>): jasmine.Spy {
+  markerClustererSpy: jasmine.SpyObj<MarkerClusterer>, apiLoaded = true): jasmine.Spy {
   const markerClustererConstructorSpy = jasmine.createSpy('MarkerClusterer constructor',
       () => {
     return markerClustererSpy;
   });
-  const testingWindow: TestingWindow = window;
-  testingWindow['MarkerClusterer'] = markerClustererConstructorSpy;
+  if (apiLoaded) {
+    const testingWindow: TestingWindow = window;
+    testingWindow['MarkerClusterer'] = markerClustererConstructorSpy;
+  }
   return markerClustererConstructorSpy;
 }