Skip to content

Commit 7c16258

Browse files
crisbetocrisbeto
authored
feat(google-maps): switch to non-deprecated typings (#23350)
Moves the `google-maps` package away from the deprecated typings. Fixes #22818.
1 parent 3913883 commit 7c16258

32 files changed

+101
-94
lines changed

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@
5858
"@angular/core": "13.0.0-next.8",
5959
"@angular/forms": "13.0.0-next.8",
6060
"@angular/platform-browser": "13.0.0-next.8",
61-
"@types/googlemaps": "^3.43.1",
61+
"@types/google.maps": "^3.45.6",
6262
"@types/youtube": "^0.0.42",
6363
"core-js-bundle": "^3.8.2",
6464
"material-components-web": "13.0.0-canary.860ad06a1.0",

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

+4-2
Original file line numberDiff line numberDiff line change
@@ -112,11 +112,13 @@ export class GoogleMapDemo {
112112
}
113113

114114
handleClick(event: google.maps.MapMouseEvent) {
115-
this.markerPositions.push(event.latLng.toJSON());
115+
if (event.latLng) {
116+
this.markerPositions.push(event.latLng.toJSON());
117+
}
116118
}
117119

118120
handleMove(event: google.maps.MapMouseEvent) {
119-
this.display = event.latLng.toJSON();
121+
this.display = event.latLng?.toJSON();
120122
}
121123

122124
clickMarker(marker: MapMarker) {

‎src/google-maps/BUILD.bazel

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ ng_module(
1414
"//src:dev_mode_types",
1515
"@npm//@angular/common",
1616
"@npm//@angular/core",
17-
"@npm//@types/googlemaps",
17+
"@npm//@types/google.maps",
1818
"@npm//rxjs",
1919
],
2020
)

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -257,7 +257,7 @@ describe('GoogleMap', () => {
257257

258258
const component = fixture.debugElement.query(By.directive(GoogleMap)).componentInstance;
259259

260-
mapSpy.getBounds.and.returnValue(null);
260+
mapSpy.getBounds.and.returnValue(undefined);
261261
expect(component.getBounds()).toBe(null);
262262

263263
component.getCenter();
@@ -272,7 +272,7 @@ describe('GoogleMap', () => {
272272
component.getMapTypeId();
273273
expect(mapSpy.getMapTypeId).toHaveBeenCalled();
274274

275-
mapSpy.getProjection.and.returnValue(null);
275+
mapSpy.getProjection.and.returnValue(undefined);
276276
expect(component.getProjection()).toBe(null);
277277

278278
component.getStreetView();

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

+9-9
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
// Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
10-
/// <reference types="googlemaps" />
10+
/// <reference types="google.maps" />
1111

1212
import {
1313
ChangeDetectionStrategy,
@@ -370,7 +370,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
370370
* See
371371
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.getCenter
372372
*/
373-
getCenter(): google.maps.LatLng {
373+
getCenter(): google.maps.LatLng | undefined {
374374
this._assertInitialized();
375375
return this.googleMap.getCenter();
376376
}
@@ -379,7 +379,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
379379
* See
380380
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.getClickableIcons
381381
*/
382-
getClickableIcons(): boolean {
382+
getClickableIcons(): boolean | undefined {
383383
this._assertInitialized();
384384
return this.googleMap.getClickableIcons();
385385
}
@@ -388,7 +388,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
388388
* See
389389
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.getHeading
390390
*/
391-
getHeading(): number {
391+
getHeading(): number | undefined {
392392
this._assertInitialized();
393393
return this.googleMap.getHeading();
394394
}
@@ -397,7 +397,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
397397
* See
398398
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.getMapTypeId
399399
*/
400-
getMapTypeId(): google.maps.MapTypeId|string {
400+
getMapTypeId(): google.maps.MapTypeId | string | undefined {
401401
this._assertInitialized();
402402
return this.googleMap.getMapTypeId();
403403
}
@@ -406,9 +406,9 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
406406
* See
407407
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.getProjection
408408
*/
409-
getProjection(): google.maps.Projection|null {
409+
getProjection(): google.maps.Projection | null {
410410
this._assertInitialized();
411-
return this.googleMap.getProjection();
411+
return this.googleMap.getProjection() || null;
412412
}
413413

414414
/**
@@ -424,7 +424,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
424424
* See
425425
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.getTilt
426426
*/
427-
getTilt(): number {
427+
getTilt(): number | undefined {
428428
this._assertInitialized();
429429
return this.googleMap.getTilt();
430430
}
@@ -433,7 +433,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
433433
* See
434434
* https://developers.google.com/maps/documentation/javascript/reference/map#Map.getZoom
435435
*/
436-
getZoom(): number {
436+
getZoom(): number | undefined {
437437
this._assertInitialized();
438438
return this.googleMap.getZoom();
439439
}

‎src/google-maps/map-anchor-point.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
// Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
10-
/// <reference types="googlemaps" />
10+
/// <reference types="google.maps" />
1111

1212
export interface MapAnchorPoint {
1313
getAnchor(): google.maps.MVCObject;

‎src/google-maps/map-base-layer.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
// Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
10-
/// <reference types="googlemaps" />
10+
/// <reference types="google.maps" />
1111

1212
import {Directive, NgZone, OnDestroy, OnInit} from '@angular/core';
1313

‎src/google-maps/map-bicycling-layer/map-bicycling-layer.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
// Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
10-
/// <reference types="googlemaps" />
10+
/// <reference types="google.maps" />
1111

1212
import {Directive} from '@angular/core';
1313

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
// Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
10-
/// <reference types="googlemaps" />
10+
/// <reference types="google.maps" />
1111

1212
import {Directive, Input, NgZone, OnDestroy, OnInit, Output} from '@angular/core';
1313
import {BehaviorSubject, combineLatest, Observable, Subject} from 'rxjs';
@@ -181,7 +181,7 @@ export class MapCircle implements OnInit, OnDestroy {
181181
* @see
182182
* developers.google.com/maps/documentation/javascript/reference/polygon#Circle.getBounds
183183
*/
184-
getBounds(): google.maps.LatLngBounds {
184+
getBounds(): google.maps.LatLngBounds | null {
185185
this._assertInitialized();
186186
return this.circle.getBounds();
187187
}
@@ -190,7 +190,7 @@ export class MapCircle implements OnInit, OnDestroy {
190190
* @see
191191
* developers.google.com/maps/documentation/javascript/reference/polygon#Circle.getCenter
192192
*/
193-
getCenter(): google.maps.LatLng {
193+
getCenter(): google.maps.LatLng | null {
194194
this._assertInitialized();
195195
return this.circle.getCenter();
196196
}

‎src/google-maps/map-directions-renderer/map-directions-renderer.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
// Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
10-
/// <reference types="googlemaps" />
10+
/// <reference types="google.maps" />
1111

1212
import {
1313
Directive,
@@ -106,7 +106,7 @@ export class MapDirectionsRenderer implements OnInit, OnChanges, OnDestroy {
106106
* See developers.google.com/maps/documentation/javascript/reference/directions
107107
* #DirectionsRenderer.getDirections
108108
*/
109-
getDirections(): google.maps.DirectionsResult {
109+
getDirections(): google.maps.DirectionsResult | null {
110110
this._assertInitialized();
111111
return this.directionsRenderer.getDirections();
112112
}
@@ -115,7 +115,7 @@ export class MapDirectionsRenderer implements OnInit, OnChanges, OnDestroy {
115115
* See developers.google.com/maps/documentation/javascript/reference/directions
116116
* #DirectionsRenderer.getPanel
117117
*/
118-
getPanel(): Node {
118+
getPanel(): Node | null {
119119
this._assertInitialized();
120120
return this.directionsRenderer.getPanel();
121121
}

‎src/google-maps/map-directions-renderer/map-directions-service.spec.ts

+17-8
Original file line numberDiff line numberDiff line change
@@ -31,19 +31,28 @@ describe('MapDirectionsService', () => {
3131
});
3232

3333
it('initializes the Google Maps Directions Service when `route` is called', () => {
34-
mapDirectionsService.route({}).subscribe();
34+
mapDirectionsService.route({
35+
origin: 'home',
36+
destination: 'work',
37+
travelMode: 'BICYCLING' as google.maps.TravelMode
38+
}).subscribe();
39+
3540
expect(directionsServiceConstructorSpy).toHaveBeenCalled();
3641
});
3742

3843
it('calls route on inputs', () => {
39-
const result = {};
40-
const status = 'OK';
41-
directionsServiceSpy.route.and.callFake((_request: google.maps.DirectionsRequest,
42-
callback: Function) => {
43-
callback(result, status);
44+
const result: google.maps.DirectionsResult = {routes: []};
45+
const status = 'OK' as google.maps.DirectionsStatus;
46+
directionsServiceSpy.route.and.callFake((_request, callback) => {
47+
callback?.(result, status);
48+
return Promise.resolve(result);
4449
});
45-
const request: google.maps.DirectionsRequest = {};
46-
mapDirectionsService.route(request).subscribe(response => {
50+
51+
mapDirectionsService.route({
52+
origin: 'home',
53+
destination: 'work',
54+
travelMode: 'BICYCLING' as google.maps.TravelMode
55+
}).subscribe(response => {
4756
expect(response).toEqual({result, status} as MapDirectionsResponse);
4857
});
4958
});

‎src/google-maps/map-directions-renderer/map-directions-service.ts

+4-9
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
// Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
10-
/// <reference types="googlemaps" />
10+
/// <reference types="google.maps" />
1111

1212
import {Injectable, NgZone} from '@angular/core';
1313
import {Observable} from 'rxjs';
@@ -42,17 +42,12 @@ export class MapDirectionsService {
4242
this._directionsService = new google.maps.DirectionsService();
4343
}
4444

45-
const callback =
46-
(
47-
result: google.maps.DirectionsResult|undefined,
48-
status: google.maps.DirectionsStatus
49-
) => {
45+
this._directionsService.route(request, (result, status) => {
5046
this._ngZone.run(() => {
51-
observer.next({result, status});
47+
observer.next({result: result || undefined, status});
5248
observer.complete();
5349
});
54-
};
55-
this._directionsService.route(request, callback);
50+
});
5651
});
5752
}
5853
}

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

+6-5
Original file line numberDiff line numberDiff line change
@@ -33,12 +33,13 @@ describe('MapGeocoder', () => {
3333

3434
it('calls geocode on inputs', () => {
3535
const results: google.maps.GeocoderResult[] = [];
36-
const status = 'OK';
37-
geocoderSpy.geocode.and.callFake((_: google.maps.GeocoderRequest, callback: Function) => {
38-
callback(results, status);
36+
const status = 'OK' as google.maps.GeocoderStatus;
37+
geocoderSpy.geocode.and.callFake((_request, callback) => {
38+
callback?.(results, status);
39+
return Promise.resolve({results});
3940
});
40-
const request: google.maps.DirectionsRequest = {};
41-
geocoder.geocode(request).subscribe(response => {
41+
42+
geocoder.geocode({region: 'Europe'}).subscribe(response => {
4243
expect(response).toEqual({results, status} as MapGeocoderResponse);
4344
});
4445
});

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
// Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
10-
/// <reference types="googlemaps" />
10+
/// <reference types="google.maps" />
1111

1212
import {Injectable, NgZone} from '@angular/core';
1313
import {Observable} from 'rxjs';
@@ -40,7 +40,7 @@ export class MapGeocoder {
4040

4141
this._geocoder.geocode(request, (results, status) => {
4242
this._ngZone.run(() => {
43-
observer.next({results, status});
43+
observer.next({results: results || [], status});
4444
observer.complete();
4545
});
4646
});

‎src/google-maps/map-ground-overlay/map-ground-overlay.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
// Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
10-
/// <reference types="googlemaps" />
10+
/// <reference types="google.maps" />
1111

1212
import {Directive, Input, NgZone, OnDestroy, OnInit, Output} from '@angular/core';
1313
import {BehaviorSubject, Observable, Subject} from 'rxjs';
@@ -129,7 +129,7 @@ export class MapGroundOverlay implements OnInit, OnDestroy {
129129
* developers.google.com/maps/documentation/javascript/reference/image-overlay
130130
* #GroundOverlay.getBounds
131131
*/
132-
getBounds(): google.maps.LatLngBounds {
132+
getBounds(): google.maps.LatLngBounds | null {
133133
this._assertInitialized();
134134
return this.groundOverlay.getBounds();
135135
}

‎src/google-maps/map-heatmap-layer/map-heatmap-layer.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -162,5 +162,5 @@ describe('MapHeatmapLayer', () => {
162162
class TestApp {
163163
@ViewChild(MapHeatmapLayer) heatmap: MapHeatmapLayer;
164164
options?: Partial<google.maps.visualization.HeatmapLayerOptions>;
165-
data?: HeatmapData;
165+
data?: HeatmapData|null;
166166
}

‎src/google-maps/map-heatmap-layer/map-heatmap-layer.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
// Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
10-
/// <reference types="googlemaps" />
10+
/// <reference types="google.maps" />
1111

1212
import {
1313
Input,

‎src/google-maps/map-info-window/map-info-window.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
// Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
10-
/// <reference types="googlemaps" />
10+
/// <reference types="google.maps" />
1111

1212
import {
1313
Directive,
@@ -145,9 +145,9 @@ export class MapInfoWindow implements OnInit, OnDestroy {
145145
* See
146146
* developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindow.getContent
147147
*/
148-
getContent(): string|Node {
148+
getContent(): string | Node | null {
149149
this._assertInitialized();
150-
return this.infoWindow.getContent();
150+
return this.infoWindow.getContent() || null;
151151
}
152152

153153
/**
@@ -157,7 +157,7 @@ export class MapInfoWindow implements OnInit, OnDestroy {
157157
*/
158158
getPosition(): google.maps.LatLng|null {
159159
this._assertInitialized();
160-
return this.infoWindow.getPosition();
160+
return this.infoWindow.getPosition() || null;
161161
}
162162

163163
/**

0 commit comments

Comments
 (0)