fix(google-maps): ensure that a mapTypeId is always passed in (#22098)

We pass in `mapTypeId` as undefined if the provided options don't have it. This seems to
trigger a bug in Google Maps where it stops loading map tiles.

These changes fix the issue by always providing a `mapTypeId`.

Fixes #22082.

(cherry picked from commit 7c9b83a)

Author: crisbeto

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

@@ -63,10 +63,7 @@ describe('GoogleMap', () => {
     const container = fixture.debugElement.query(By.css('div'))!;
     expect(container.nativeElement.style.height).toBe(DEFAULT_HEIGHT);
     expect(container.nativeElement.style.width).toBe(DEFAULT_WIDTH);
-    expect(mapConstructorSpy).toHaveBeenCalledWith(container.nativeElement, {
-      ...DEFAULT_OPTIONS,
-      mapTypeId: undefined
-    });
+    expect(mapConstructorSpy).toHaveBeenCalledWith(container.nativeElement, DEFAULT_OPTIONS);
   });
 
   it('sets height and width of the map', () => {
@@ -81,10 +78,7 @@ describe('GoogleMap', () => {
     const container = fixture.debugElement.query(By.css('div'))!;
     expect(container.nativeElement.style.height).toBe('750px');
     expect(container.nativeElement.style.width).toBe('400px');
-    expect(mapConstructorSpy).toHaveBeenCalledWith(container.nativeElement, {
-      ...DEFAULT_OPTIONS,
-      mapTypeId: undefined
-    });
+    expect(mapConstructorSpy).toHaveBeenCalledWith(container.nativeElement, DEFAULT_OPTIONS);
 
     fixture.componentInstance.height = '650px';
     fixture.componentInstance.width = '350px';
@@ -131,7 +125,7 @@ describe('GoogleMap', () => {
   });
 
   it('sets center and zoom of the map', () => {
-    const options = {center: {lat: 3, lng: 5}, zoom: 7, mapTypeId: undefined};
+    const options = {center: {lat: 3, lng: 5}, zoom: 7, mapTypeId: DEFAULT_OPTIONS.mapTypeId};
     mapSpy = createMapSpy(options);
     mapConstructorSpy = createMapConstructorSpy(mapSpy).and.callThrough();
 
@@ -152,7 +146,12 @@ describe('GoogleMap', () => {
   });
 
   it('sets map options', () => {
-    const options = {center: {lat: 3, lng: 5}, zoom: 7, draggable: false, mapTypeId: undefined};
+    const options = {
+      center: {lat: 3, lng: 5},
+      zoom: 7,
+      draggable: false,
+      mapTypeId: DEFAULT_OPTIONS.mapTypeId
+    };
     mapSpy = createMapSpy(options);
     mapConstructorSpy = createMapConstructorSpy(mapSpy).and.callThrough();
 
@@ -211,7 +210,7 @@ describe('GoogleMap', () => {
       center: {lat: 12, lng: 15},
       zoom: 5,
       heading: 170,
-      mapTypeId: undefined
+      mapTypeId: DEFAULT_OPTIONS.mapTypeId
     };
     mapSpy = createMapSpy(correctedOptions);
     mapConstructorSpy = createMapConstructorSpy(mapSpy);

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

@@ -35,7 +35,9 @@ interface GoogleMapsWindow extends Window {
 /** default options set to the Googleplex */
 export const DEFAULT_OPTIONS: google.maps.MapOptions = {
   center: {lat: 37.421995, lng: -122.084092},
-  zoom: 17
+  zoom: 17,
+  // Note: the type conversion here isn't necessary for our CI, but it resolves a g3 failure.
+  mapTypeId: 'roadmap' as unknown as google.maps.MapTypeId
 };
 
 /** Arbitrary default height for the map element */
@@ -466,7 +468,9 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
       // Google Maps will render a blank rectangle which looks broken.
       center: this._center || options.center || DEFAULT_OPTIONS.center,
       zoom: this._zoom ?? options.zoom ?? DEFAULT_OPTIONS.zoom,
-      mapTypeId: this.mapTypeId || options.mapTypeId
+      // Passing in an undefined `mapTypeId` seems to break tile loading
+      // so make sure that we have some kind of default (see #22082).
+      mapTypeId: this.mapTypeId || options.mapTypeId || DEFAULT_OPTIONS.mapTypeId
     };
   }