fix(google-maps): rendering blank if custom options with no zoom are provided (#20882)

If an options object without a 'zoom' is passed to the Google Maps API,
it'll render a grey rectangle which looks broken.
These changes make sure that we always pass in a 'zoom' so map is rendered.

(cherry picked from commit f0a4e59)

Author: dmitry-stepanenko

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

@@ -181,6 +181,30 @@ describe('GoogleMap', () => {
     expect(mapConstructorSpy.calls.mostRecent()?.args[1].center).toBeTruthy();
   });
 
+  it('should set a default zoom level if the custom options do not provide one', () => {
+    const options = {};
+    mapSpy = createMapSpy(options);
+    mapConstructorSpy = createMapConstructorSpy(mapSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.componentInstance.options = options;
+    fixture.detectChanges();
+
+    expect(mapConstructorSpy.calls.mostRecent()?.args[1].zoom).toEqual(DEFAULT_OPTIONS.zoom);
+  });
+
+  it('should not set a default zoom level if the custom options provide "zoom: 0"', () => {
+    const options = {zoom: 0};
+    mapSpy = createMapSpy(options);
+    mapConstructorSpy = createMapConstructorSpy(mapSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.componentInstance.options = options;
+    fixture.detectChanges();
+
+    expect(mapConstructorSpy.calls.mostRecent()?.args[1].zoom).toEqual(0);
+  });
+
   it('gives precedence to center and zoom over options', () => {
     const inputOptions = {center: {lat: 3, lng: 5}, zoom: 7, heading: 170};
     const correctedOptions = {

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

@@ -448,10 +448,10 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
         .pipe(map(([options, center, zoom]) => {
           const combinedOptions: google.maps.MapOptions = {
             ...options,
-            // It's important that we set **some** kind of `center`, otherwise
+            // It's important that we set **some** kind of `center` and `zoom`, otherwise
             // Google Maps will render a blank rectangle which looks broken.
             center: center || options.center || DEFAULT_OPTIONS.center,
-            zoom: zoom !== undefined ? zoom : options.zoom,
+            zoom: zoom ?? options.zoom ?? DEFAULT_OPTIONS.zoom,
             mapTypeId: this.mapTypeId
           };
           return combinedOptions;