feat(google-maps): support setting the map type (#18578)

Adds support for setting the `mapTypeId` which determines the kind of map that will be shown (e.g. terrain map, roadmap etc).

Fixes #18577.

Author: crisbeto

src/dev-app/google-map/google-map-demo.html

@@ -5,7 +5,8 @@
               [zoom]="zoom"
               (mapClick)="handleClick($event)"
               (mapMousemove)="handleMove($event)"
-              (mapRightclick)="handleRightclick()">
+              (mapRightclick)="handleRightclick()"
+              [mapTypeId]="mapTypeId">
     <map-marker #firstMarker [position]="center" (mapClick)="clickMarker(firstMarker)"></map-marker>
     <map-marker #marker
                 *ngFor="let markerPosition of markerPositions"
@@ -22,6 +23,16 @@
   <p><label>Latitude:</label> {{display?.lat}}</p>
   <p><label>Longitude:</label> {{display?.lng}}</p>
 
+  <div>
+    <label for="map-type">
+      Select map type
+
+      <select id="map-type" (change)="mapTypeChanged($event)" #mapType>
+        <option *ngFor="let type of mapTypeIds" [value]="type">{{type}}</option>
+      </select>
+    </label>
+  </div>
+
   <div>
     <label for="polyline-checkbox">
       Toggle Polyline

src/dev-app/google-map/google-map-demo.ts

@@ -66,6 +66,14 @@ export class GoogleMapDemo {
   circleOptions: google.maps.CircleOptions =
       {center: CIRCLE_CENTER, radius: CIRCLE_RADIUS, strokeColor: 'grey', strokeOpacity: 0.8};
 
+  mapTypeId: google.maps.MapTypeId;
+  mapTypeIds = [
+    google.maps.MapTypeId.HYBRID,
+    google.maps.MapTypeId.ROADMAP,
+    google.maps.MapTypeId.SATELLITE,
+    google.maps.MapTypeId.TERRAIN
+  ];
+
   handleClick(event: google.maps.MouseEvent) {
     this.markerPositions.push(event.latLng.toJSON());
   }
@@ -130,4 +138,8 @@ export class GoogleMapDemo {
       radius: this.circle.getRadius(),
     };
   }
+
+  mapTypeChanged(event: Event) {
+    this.mapTypeId = (event.target as HTMLSelectElement).value as unknown as google.maps.MapTypeId;
+  }
 }

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

@@ -122,7 +122,7 @@ describe('GoogleMap', () => {
   });
 
   it('sets center and zoom of the map', () => {
-    const options = {center: {lat: 3, lng: 5}, zoom: 7};
+    const options = {center: {lat: 3, lng: 5}, zoom: 7, mapTypeId: undefined};
     mapSpy = createMapSpy(options);
     mapConstructorSpy = createMapConstructorSpy(mapSpy).and.callThrough();
 
@@ -143,7 +143,7 @@ describe('GoogleMap', () => {
   });
 
   it('sets map options', () => {
-    const options = {center: {lat: 3, lng: 5}, zoom: 7, draggable: false};
+    const options = {center: {lat: 3, lng: 5}, zoom: 7, draggable: false, mapTypeId: undefined};
     mapSpy = createMapSpy(options);
     mapConstructorSpy = createMapConstructorSpy(mapSpy).and.callThrough();
 
@@ -162,7 +162,12 @@ describe('GoogleMap', () => {
 
   it('gives precedence to center and zoom over options', () => {
     const inputOptions = {center: {lat: 3, lng: 5}, zoom: 7, heading: 170};
-    const correctedOptions = {center: {lat: 12, lng: 15}, zoom: 5, heading: 170};
+    const correctedOptions = {
+      center: {lat: 12, lng: 15},
+      zoom: 5,
+      heading: 170,
+      mapTypeId: undefined
+    };
     mapSpy = createMapSpy(correctedOptions);
     mapConstructorSpy = createMapConstructorSpy(mapSpy);
 
@@ -280,6 +285,23 @@ describe('GoogleMap', () => {
     expect(addSpy).toHaveBeenCalledWith('projection_changed', jasmine.any(Function));
     subscription.unsubscribe();
   });
+
+  it('should set the map type', () => {
+    mapSpy = createMapSpy(DEFAULT_OPTIONS);
+    mapConstructorSpy = createMapConstructorSpy(mapSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.componentInstance.mapTypeId = 'terrain' as unknown as google.maps.MapTypeId;
+    fixture.detectChanges();
+
+    expect(mapConstructorSpy).toHaveBeenCalledWith(jasmine.any(HTMLElement),
+      jasmine.objectContaining({mapTypeId: 'terrain'}));
+
+    fixture.componentInstance.mapTypeId = 'roadmap' as unknown as google.maps.MapTypeId;
+    fixture.detectChanges();
+
+    expect(mapSpy.setMapTypeId).toHaveBeenCalledWith('roadmap');
+  });
 });
 
 @Component({
@@ -289,6 +311,7 @@ describe('GoogleMap', () => {
                          [center]="center"
                          [zoom]="zoom"
                          [options]="options"
+                         [mapTypeId]="mapTypeId"
                          (mapClick)="handleClick($event)"
                          (centerChanged)="handleCenterChanged()"
                          (mapRightclick)="handleRightclick($event)">
@@ -301,6 +324,7 @@ class TestApp {
   center?: google.maps.LatLngLiteral;
   zoom?: number;
   options?: google.maps.MapOptions;
+  mapTypeId?: google.maps.MapTypeId;
 
   handleClick(event: google.maps.MouseEvent) {}
   handleCenterChanged() {}

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

@@ -46,6 +46,7 @@ export interface UpdatedGoogleMap extends google.maps.Map {
 export const DEFAULT_OPTIONS: google.maps.MapOptions = {
   center: {lat: 37.421995, lng: -122.084092},
   zoom: 17,
+  mapTypeId: undefined
 };
 
 /** Arbitrary default height for the map element */
@@ -79,10 +80,18 @@ 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;
 
+  /** Width of the map. */
   @Input() width: string | number = DEFAULT_WIDTH;
 
+  /**
+   * Type of map that should be rendered. E.g. hybrid map, terrain map etc.
+   * See: https://developers.google.com/maps/documentation/javascript/reference/map#MapTypeId
+   */
+  @Input() mapTypeId: google.maps.MapTypeId | undefined;
+
   @Input()
   set center(center: google.maps.LatLngLiteral|google.maps.LatLng) {
     this._center.next(center);
@@ -249,6 +258,9 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
 
   ngOnChanges() {
     this._setSize();
+    if (this._googleMap && this.mapTypeId) {
+      this._googleMap.setMapTypeId(this.mapTypeId);
+    }
   }
 
   ngOnInit() {
@@ -447,6 +459,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
             ...options,
             center: center || options.center,
             zoom: zoom !== undefined ? zoom : options.zoom,
+            mapTypeId: this.mapTypeId
           };
           return combinedOptions;
         }));

src/google-maps/testing/fake-google-map-utils.ts

@@ -28,7 +28,7 @@ export function createMapSpy(options: google.maps.MapOptions): jasmine.SpyObj<Up
   const mapSpy = jasmine.createSpyObj('google.maps.Map', [
     'setOptions', 'setCenter', 'setZoom', 'setMap', 'addListener', 'fitBounds', 'panBy', 'panTo',
     'panToBounds', 'getBounds', 'getCenter', 'getClickableIcons', 'getHeading', 'getMapTypeId',
-    'getProjection', 'getStreetView', 'getTilt', 'getZoom'
+    'getProjection', 'getStreetView', 'getTilt', 'getZoom', 'setMapTypeId'
   ]);
   mapSpy.addListener.and.returnValue({remove: () => {}});
   return mapSpy;

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

@@ -18,6 +18,7 @@ export declare class GoogleMap implements OnChanges, OnInit, OnDestroy {
     mapMouseout: Observable<google.maps.MouseEvent>;
     mapMouseover: Observable<google.maps.MouseEvent>;
     mapRightclick: Observable<google.maps.MouseEvent>;
+    mapTypeId: google.maps.MapTypeId | undefined;
     get mapTypes(): google.maps.MapTypeRegistry;
     maptypeidChanged: Observable<void>;
     set options(options: google.maps.MapOptions);
@@ -46,7 +47,7 @@ export declare class GoogleMap implements OnChanges, OnInit, OnDestroy {
     panBy(x: number, y: number): void;
     panTo(latLng: google.maps.LatLng | google.maps.LatLngLiteral): void;
     panToBounds(latLngBounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral, padding?: number | google.maps.Padding): void;
-    static ɵcmp: i0.ɵɵComponentDefWithMeta<GoogleMap, "google-map", never, { "height": "height"; "width": "width"; "center": "center"; "zoom": "zoom"; "options": "options"; }, { "boundsChanged": "boundsChanged"; "centerChanged": "centerChanged"; "mapClick": "mapClick"; "mapDblclick": "mapDblclick"; "mapDrag": "mapDrag"; "mapDragend": "mapDragend"; "mapDragstart": "mapDragstart"; "headingChanged": "headingChanged"; "idle": "idle"; "maptypeidChanged": "maptypeidChanged"; "mapMousemove": "mapMousemove"; "mapMouseout": "mapMouseout"; "mapMouseover": "mapMouseover"; "projectionChanged": "projectionChanged"; "mapRightclick": "mapRightclick"; "tilesloaded": "tilesloaded"; "tiltChanged": "tiltChanged"; "zoomChanged": "zoomChanged"; }, never>;
+    static ɵcmp: i0.ɵɵComponentDefWithMeta<GoogleMap, "google-map", never, { "height": "height"; "width": "width"; "mapTypeId": "mapTypeId"; "center": "center"; "zoom": "zoom"; "options": "options"; }, { "boundsChanged": "boundsChanged"; "centerChanged": "centerChanged"; "mapClick": "mapClick"; "mapDblclick": "mapDblclick"; "mapDrag": "mapDrag"; "mapDragend": "mapDragend"; "mapDragstart": "mapDragstart"; "headingChanged": "headingChanged"; "idle": "idle"; "maptypeidChanged": "maptypeidChanged"; "mapMousemove": "mapMousemove"; "mapMouseout": "mapMouseout"; "mapMouseover": "mapMouseover"; "projectionChanged": "projectionChanged"; "mapRightclick": "mapRightclick"; "tilesloaded": "tilesloaded"; "tiltChanged": "tiltChanged"; "zoomChanged": "zoomChanged"; }, never>;
     static ɵfac: i0.ɵɵFactoryDef<GoogleMap>;
 }