fix(google-maps): allow for dimensions to be controlled through CSS (#19790)

When the Google Map component was first introduced, it had inputs to control the `width` and `height`. This is somewhat inflexible, because it only handles pixel units and can't be controlled by media queries. Since changing the sizing approach now would be a breaking change, these changes allow for the consumer to set the `width` and `height` to `null` and to provide it themselves through CSS.

Author: crisbeto

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

@@ -116,6 +116,20 @@ describe('GoogleMap', () => {
     expect(container.style.width).toBe('600px');
   });
 
+  it('should be able to set null as the width/height', () => {
+    mapSpy = createMapSpy(DEFAULT_OPTIONS);
+    mapConstructorSpy = createMapConstructorSpy(mapSpy);
+
+    const fixture = TestBed.createComponent(TestApp);
+    const instance = fixture.componentInstance;
+    instance.height = instance.width = null;
+    fixture.detectChanges();
+
+    const container = fixture.debugElement.query(By.css('div'))!.nativeElement;
+    expect(container.style.height).toBeFalsy();
+    expect(container.style.width).toBeFalsy();
+  });
+
   it('sets center and zoom of the map', () => {
     const options = {center: {lat: 3, lng: 5}, zoom: 7, mapTypeId: undefined};
     mapSpy = createMapSpy(options);
@@ -314,8 +328,8 @@ describe('GoogleMap', () => {
 })
 class TestApp {
   @ViewChild(GoogleMap) map: GoogleMap;
-  height?: string | number;
-  width?: string | number;
+  height?: string | number | null;
+  width?: string | number | null;
   center?: google.maps.LatLngLiteral;
   zoom?: number;
   options?: google.maps.MapOptions;

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

@@ -77,11 +77,11 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
   /** Whether we're currently rendering inside a browser. */
   _isBrowser: boolean;
 
-  /** Height of the map. */
-  @Input() height: string | number = DEFAULT_HEIGHT;
+  /** Height of the map. Set this to `null` if you'd like to control the height through CSS. */
+  @Input() height: string | number | null = DEFAULT_HEIGHT;
 
-  /** Width of the map. */
-  @Input() width: string | number = DEFAULT_WIDTH;
+  /** Width of the map. Set this to `null` if you'd like to control the width through CSS. */
+  @Input() width: string | number | null = DEFAULT_WIDTH;
 
   /**
    * Type of map that should be rendered. E.g. hybrid map, terrain map etc.
@@ -443,8 +443,9 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
   private _setSize() {
     if (this._mapEl) {
       const styles = this._mapEl.style;
-      styles.height = coerceCssPixelValue(this.height) || DEFAULT_HEIGHT;
-      styles.width = coerceCssPixelValue(this.width) || DEFAULT_WIDTH;
+      styles.height =
+          this.height === null ? '' : (coerceCssPixelValue(this.height) || DEFAULT_HEIGHT);
+      styles.width = this.width === null ? '' : (coerceCssPixelValue(this.width) || DEFAULT_WIDTH);
     }
   }
 

tools/public_api_guard/google-maps/google-maps.d.ts

@@ -7,7 +7,7 @@ export declare class GoogleMap implements OnChanges, OnInit, OnDestroy {
     get data(): google.maps.Data;
     googleMap?: google.maps.Map;
     headingChanged: Observable<void>;
-    height: string | number;
+    height: string | number | null;
     idle: Observable<void>;
     mapClick: Observable<google.maps.MouseEvent | google.maps.IconMouseEvent>;
     mapDblclick: Observable<google.maps.MouseEvent>;
@@ -26,7 +26,7 @@ export declare class GoogleMap implements OnChanges, OnInit, OnDestroy {
     projectionChanged: Observable<void>;
     tilesloaded: Observable<void>;
     tiltChanged: Observable<void>;
-    width: string | number;
+    width: string | number | null;
     set zoom(zoom: number);
     zoomChanged: Observable<void>;
     constructor(_elementRef: ElementRef, _ngZone: NgZone,