From 850b98adba1489c275070e43db0a99ddea3f6fbc Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Sun, 28 Jun 2020 09:49:43 +0200
Subject: [PATCH] fix(google-maps): allow for dimensions to be controlled
 through CSS

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.
---
 src/google-maps/google-map/google-map.spec.ts  | 18 ++++++++++++++++--
 src/google-maps/google-map/google-map.ts       | 13 +++++++------
 .../google-maps/google-maps.d.ts               |  4 ++--
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/google-maps/google-map/google-map.spec.ts b/src/google-maps/google-map/google-map.spec.ts
index 4af2a1aab036..a02c474532b1 100644
--- a/src/google-maps/google-map/google-map.spec.ts
+++ b/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;
diff --git a/src/google-maps/google-map/google-map.ts b/src/google-maps/google-map/google-map.ts
index 9f8e39fb9eff..c02ccb9b9a96 100644
--- a/src/google-maps/google-map/google-map.ts
+++ b/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);
     }
   }
 
diff --git a/tools/public_api_guard/google-maps/google-maps.d.ts b/tools/public_api_guard/google-maps/google-maps.d.ts
index f62403f7838f..46da5e8943b7 100644
--- a/tools/public_api_guard/google-maps/google-maps.d.ts
+++ b/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,