fix(google-maps): support numbers for width/height of the map (#18105)

Similarly to what we support in Material and the CDK, these changes allow for numbers to be passed in directly as the `width` and `height` of a map. This is more convenient if the dimensions are computed.

Author: crisbeto

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

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

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

@@ -78,9 +78,9 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
   private _mapEl: HTMLElement;
   _googleMap: UpdatedGoogleMap;
 
-  @Input() height = DEFAULT_HEIGHT;
+  @Input() height: string | number = DEFAULT_HEIGHT;
 
-  @Input() width = DEFAULT_WIDTH;
+  @Input() width: string | number = DEFAULT_WIDTH;
 
   @Input()
   set center(center: google.maps.LatLngLiteral|google.maps.LatLng) {
@@ -431,8 +431,9 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
 
   private _setSize() {
     if (this._mapEl) {
-      this._mapEl.style.height = this.height || DEFAULT_HEIGHT;
-      this._mapEl.style.width = this.width || DEFAULT_WIDTH;
+      const styles = this._mapEl.style;
+      styles.height = coerceCssPixelValue(this.height) || DEFAULT_HEIGHT;
+      styles.width = coerceCssPixelValue(this.width) || DEFAULT_WIDTH;
     }
   }
 
@@ -493,3 +494,14 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
     }
   }
 }
+
+const cssUnitsPattern = /([A-Za-z%]+)$/;
+
+/** Coerces a value to a CSS pixel value. */
+function coerceCssPixelValue(value: any): string {
+  if (value == null) {
+    return '';
+  }
+
+  return cssUnitsPattern.test(value) ? value : `${value}px`;
+}

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

@@ -6,7 +6,7 @@ export declare class GoogleMap implements OnChanges, OnInit, OnDestroy {
     readonly controls: Array<google.maps.MVCArray<Node>>;
     readonly data: google.maps.Data;
     headingChanged: Observable<void>;
-    height: string;
+    height: string | number;
     idle: Observable<void>;
     mapClick: Observable<google.maps.MouseEvent | google.maps.IconMouseEvent>;
     mapDblclick: Observable<google.maps.MouseEvent>;
@@ -24,7 +24,7 @@ export declare class GoogleMap implements OnChanges, OnInit, OnDestroy {
     projectionChanged: Observable<void>;
     tilesloaded: Observable<void>;
     tiltChanged: Observable<void>;
-    width: string;
+    width: string | number;
     zoom: number;
     zoomChanged: Observable<void>;
     constructor(_elementRef: ElementRef,