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;
}