From ded2308692a054b8790e8df835455769eae4d1ca Mon Sep 17 00:00:00 2001 From: crisbeto Date: Fri, 21 Feb 2020 20:21:33 +0100 Subject: [PATCH] feat(google-maps): support setting the map type Adds support for setting the `mapTypeId` which determines the kind of map that will be shown (e.g. terrain map, roadmap etc). Fixes #18577. --- src/dev-app/google-map/google-map-demo.html | 14 +++++++-- src/dev-app/google-map/google-map-demo.ts | 12 ++++++++ src/google-maps/google-map/google-map.spec.ts | 30 +++++++++++++++++-- src/google-maps/google-map/google-map.ts | 13 ++++++++ .../testing/fake-google-map-utils.ts | 2 +- .../google-maps/google-maps.d.ts | 3 +- 6 files changed, 67 insertions(+), 7 deletions(-) diff --git a/src/dev-app/google-map/google-map-demo.html b/src/dev-app/google-map/google-map-demo.html index 6e3f905a87e7..c53740dadf0a 100644 --- a/src/dev-app/google-map/google-map-demo.html +++ b/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"> {{display?.lat}}

{{display?.lng}}

+
+ +
+
- diff --git a/src/dev-app/google-map/google-map-demo.ts b/src/dev-app/google-map/google-map-demo.ts index b0afc7ab3d30..f35d0f435bc9 100644 --- a/src/dev-app/google-map/google-map-demo.ts +++ b/src/dev-app/google-map/google-map-demo.ts @@ -55,6 +55,14 @@ export class GoogleMapDemo { rectangleOptions: google.maps .RectangleOptions = {bounds: RECTANGLE_BOUNDS, 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()); } @@ -106,4 +114,8 @@ export class GoogleMapDemo { bounds: this.rectangle.getBounds() }; } + + mapTypeChanged(event: Event) { + this.mapTypeId = (event.target as HTMLSelectElement).value as unknown as google.maps.MapTypeId; + } } diff --git a/src/google-maps/google-map/google-map.spec.ts b/src/google-maps/google-map/google-map.spec.ts index 8a97d9b34333..e79734fea201 100644 --- a/src/google-maps/google-map/google-map.spec.ts +++ b/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() {} diff --git a/src/google-maps/google-map/google-map.ts b/src/google-maps/google-map/google-map.ts index 041bf2b80887..81c3a7a2a14d 100644 --- a/src/google-maps/google-map/google-map.ts +++ b/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; })); diff --git a/src/google-maps/testing/fake-google-map-utils.ts b/src/google-maps/testing/fake-google-map-utils.ts index 4c4fb8858647..dc80dedf5329 100644 --- a/src/google-maps/testing/fake-google-map-utils.ts +++ b/src/google-maps/testing/fake-google-map-utils.ts @@ -27,7 +27,7 @@ export function createMapSpy(options: google.maps.MapOptions): jasmine.SpyObj {}}); return mapSpy; 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 7c6bafa440ba..9856d0f276c7 100644 --- a/tools/public_api_guard/google-maps/google-maps.d.ts +++ b/tools/public_api_guard/google-maps/google-maps.d.ts @@ -18,6 +18,7 @@ export declare class GoogleMap implements OnChanges, OnInit, OnDestroy { mapMouseout: Observable; mapMouseover: Observable; mapRightclick: Observable; + mapTypeId: google.maps.MapTypeId | undefined; get mapTypes(): google.maps.MapTypeRegistry; maptypeidChanged: Observable; 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; + static ɵcmp: i0.ɵɵComponentDefWithMeta; static ɵfac: i0.ɵɵFactoryDef; }