feat(google-maps): switch to non-deprecated typings

Moves the `google-maps` package away from the deprecated typings. Fixes #22818.
angular · Aug 25, 2021 · 06c5972 · 06c5972
1 parent c2a20c4
commit 06c5972
Show file tree

Hide file tree

Showing 32 changed files with 84 additions and 77 deletions.
diff --git a/package.json b/package.json
@@ -59,7 +59,7 @@
     "@angular/core": "13.0.0-next.2",
     "@angular/forms": "13.0.0-next.2",
     "@angular/platform-browser": "13.0.0-next.2",
-    "@types/googlemaps": "^3.43.1",
+    "@types/google.maps": "^3.45.6",
     "@types/youtube": "^0.0.42",
     "core-js-bundle": "^3.8.2",
     "material-components-web": "13.0.0-canary.0a9069300.0",

diff --git a/src/dev-app/google-map/google-map-demo.ts b/src/dev-app/google-map/google-map-demo.ts
@@ -112,11 +112,13 @@ export class GoogleMapDemo {
   }
 
   handleClick(event: google.maps.MapMouseEvent) {
-    this.markerPositions.push(event.latLng.toJSON());
+    if (event.latLng) {
+      this.markerPositions.push(event.latLng.toJSON());
+    }
   }
 
   handleMove(event: google.maps.MapMouseEvent) {
-    this.display = event.latLng.toJSON();
+    this.display = event.latLng?.toJSON();
   }
 
   clickMarker(marker: MapMarker) {

diff --git a/src/google-maps/BUILD.bazel b/src/google-maps/BUILD.bazel
@@ -14,7 +14,7 @@ ng_module(
         "//src:dev_mode_types",
         "@npm//@angular/common",
         "@npm//@angular/core",
-        "@npm//@types/googlemaps",
+        "@npm//@types/google.maps",
         "@npm//rxjs",
     ],
 )

diff --git a/src/google-maps/google-map/google-map.spec.ts b/src/google-maps/google-map/google-map.spec.ts
@@ -257,7 +257,7 @@ describe('GoogleMap', () => {
 
     const component = fixture.debugElement.query(By.directive(GoogleMap)).componentInstance;
 
-    mapSpy.getBounds.and.returnValue(null);
+    mapSpy.getBounds.and.returnValue(undefined);
     expect(component.getBounds()).toBe(null);
 
     component.getCenter();
@@ -272,7 +272,7 @@ describe('GoogleMap', () => {
     component.getMapTypeId();
     expect(mapSpy.getMapTypeId).toHaveBeenCalled();
 
-    mapSpy.getProjection.and.returnValue(null);
+    mapSpy.getProjection.and.returnValue(undefined);
     expect(component.getProjection()).toBe(null);
 
     component.getStreetView();

diff --git a/src/google-maps/google-map/google-map.ts b/src/google-maps/google-map/google-map.ts
@@ -7,7 +7,7 @@
  */
 
 // Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
-/// <reference types="googlemaps" />
+/// <reference types="google.maps" />
 
 import {
   ChangeDetectionStrategy,
@@ -372,7 +372,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
    */
   getCenter(): google.maps.LatLng {
     this._assertInitialized();
-    return this.googleMap.getCenter();
+    return this.googleMap.getCenter()!;
   }
 
   /**
@@ -381,7 +381,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
    */
   getClickableIcons(): boolean {
     this._assertInitialized();
-    return this.googleMap.getClickableIcons();
+    return this.googleMap.getClickableIcons()!;
   }
 
   /**
@@ -390,7 +390,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
    */
   getHeading(): number {
     this._assertInitialized();
-    return this.googleMap.getHeading();
+    return this.googleMap.getHeading()!;
   }
 
   /**
@@ -399,7 +399,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
    */
   getMapTypeId(): google.maps.MapTypeId|string {
     this._assertInitialized();
-    return this.googleMap.getMapTypeId();
+    return this.googleMap.getMapTypeId()!;
   }
 
   /**
@@ -408,7 +408,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
    */
   getProjection(): google.maps.Projection|null {
     this._assertInitialized();
-    return this.googleMap.getProjection();
+    return this.googleMap.getProjection() || null;
   }
 
   /**
@@ -426,7 +426,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
    */
   getTilt(): number {
     this._assertInitialized();
-    return this.googleMap.getTilt();
+    return this.googleMap.getTilt()!;
   }
 
   /**
@@ -435,7 +435,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
    */
   getZoom(): number {
     this._assertInitialized();
-    return this.googleMap.getZoom();
+    return this.googleMap.getZoom()!;
   }
 
   /**

diff --git a/src/google-maps/map-anchor-point.ts b/src/google-maps/map-anchor-point.ts
@@ -7,7 +7,7 @@
  */
 
 // Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
-/// <reference types="googlemaps" />
+/// <reference types="google.maps" />
 
 export interface MapAnchorPoint {
   getAnchor(): google.maps.MVCObject;

diff --git a/src/google-maps/map-base-layer.ts b/src/google-maps/map-base-layer.ts
@@ -7,7 +7,7 @@
  */
 
 // Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
-/// <reference types="googlemaps" />
+/// <reference types="google.maps" />
 
 import {Directive, NgZone, OnDestroy, OnInit} from '@angular/core';
 

diff --git a/src/google-maps/map-bicycling-layer/map-bicycling-layer.ts b/src/google-maps/map-bicycling-layer/map-bicycling-layer.ts
@@ -7,7 +7,7 @@
  */
 
 // Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
-/// <reference types="googlemaps" />
+/// <reference types="google.maps" />
 
 import {Directive} from '@angular/core';
 

diff --git a/src/google-maps/map-circle/map-circle.ts b/src/google-maps/map-circle/map-circle.ts
@@ -7,7 +7,7 @@
  */
 
 // Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
-/// <reference types="googlemaps" />
+/// <reference types="google.maps" />
 
 import {Directive, Input, NgZone, OnDestroy, OnInit, Output} from '@angular/core';
 import {BehaviorSubject, combineLatest, Observable, Subject} from 'rxjs';
@@ -183,7 +183,7 @@ export class MapCircle implements OnInit, OnDestroy {
    */
   getBounds(): google.maps.LatLngBounds {
     this._assertInitialized();
-    return this.circle.getBounds();
+    return this.circle.getBounds()!;
   }
 
   /**
@@ -192,7 +192,7 @@ export class MapCircle implements OnInit, OnDestroy {
    */
   getCenter(): google.maps.LatLng {
     this._assertInitialized();
-    return this.circle.getCenter();
+    return this.circle.getCenter()!;
   }
 
   /**

diff --git a/src/google-maps/map-directions-renderer/map-directions-renderer.ts b/src/google-maps/map-directions-renderer/map-directions-renderer.ts
@@ -7,7 +7,7 @@
  */
 
 // Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
-/// <reference types="googlemaps" />
+/// <reference types="google.maps" />
 
 import {
   Directive,
@@ -108,7 +108,7 @@ export class MapDirectionsRenderer implements OnInit, OnChanges, OnDestroy {
    */
   getDirections(): google.maps.DirectionsResult {
     this._assertInitialized();
-    return this.directionsRenderer.getDirections();
+    return this.directionsRenderer.getDirections()!;
   }
 
   /**
@@ -117,7 +117,7 @@ export class MapDirectionsRenderer implements OnInit, OnChanges, OnDestroy {
    */
   getPanel(): Node {
     this._assertInitialized();
-    return this.directionsRenderer.getPanel();
+    return this.directionsRenderer.getPanel()!;
   }
 
   /**

diff --git a/src/google-maps/map-directions-renderer/map-directions-service.spec.ts b/src/google-maps/map-directions-renderer/map-directions-service.spec.ts
@@ -31,19 +31,28 @@ describe('MapDirectionsService', () => {
   });
 
   it('initializes the Google Maps Directions Service when `route` is called', () => {
-    mapDirectionsService.route({}).subscribe();
+    mapDirectionsService.route({
+      origin: 'home',
+      destination: 'work',
+      travelMode: 'BICYCLING' as google.maps.TravelMode
+    }).subscribe();
+
     expect(directionsServiceConstructorSpy).toHaveBeenCalled();
   });
 
   it('calls route on inputs', () => {
-    const result = {};
-    const status = 'OK';
-    directionsServiceSpy.route.and.callFake((_request: google.maps.DirectionsRequest,
-        callback: Function) => {
-      callback(result, status);
+    const result: google.maps.DirectionsResult = {routes: []};
+    const status = 'OK' as google.maps.DirectionsStatus;
+    directionsServiceSpy.route.and.callFake((_request, callback) => {
+      callback?.(result, status);
+      return Promise.resolve(result);
     });
-    const request: google.maps.DirectionsRequest = {};
-    mapDirectionsService.route(request).subscribe(response => {
+
+    mapDirectionsService.route({
+      origin: 'home',
+      destination: 'work',
+      travelMode: 'BICYCLING' as google.maps.TravelMode
+    }).subscribe(response => {
       expect(response).toEqual({result, status} as MapDirectionsResponse);
     });
   });

diff --git a/src/google-maps/map-directions-renderer/map-directions-service.ts b/src/google-maps/map-directions-renderer/map-directions-service.ts
@@ -7,7 +7,7 @@
  */
 
 // Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
-/// <reference types="googlemaps" />
+/// <reference types="google.maps" />
 
 import {Injectable, NgZone} from '@angular/core';
 import {Observable} from 'rxjs';
@@ -42,17 +42,12 @@ export class MapDirectionsService {
         this._directionsService = new google.maps.DirectionsService();
       }
 
-      const callback =
-          (
-            result: google.maps.DirectionsResult|undefined,
-            status: google.maps.DirectionsStatus
-          ) => {
+      this._directionsService.route(request, (result, status) => {
         this._ngZone.run(() => {
-          observer.next({result, status});
+          observer.next({result: result || undefined, status});
           observer.complete();
         });
-      };
-      this._directionsService.route(request, callback);
+      });
     });
   }
 }
diff --git a/src/google-maps/map-geocoder/map-geocoder.spec.ts b/src/google-maps/map-geocoder/map-geocoder.spec.ts
@@ -33,12 +33,13 @@ describe('MapGeocoder', () => {
 
   it('calls geocode on inputs', () => {
     const results: google.maps.GeocoderResult[] = [];
-    const status = 'OK';
-    geocoderSpy.geocode.and.callFake((_: google.maps.GeocoderRequest, callback: Function) => {
-      callback(results, status);
+    const status = 'OK' as google.maps.GeocoderStatus;
+    geocoderSpy.geocode.and.callFake((_request, callback) => {
+      callback?.(results, status);
+      return Promise.resolve({results});
     });
-    const request: google.maps.DirectionsRequest = {};
-    geocoder.geocode(request).subscribe(response => {
+
+    geocoder.geocode({region: 'Europe'}).subscribe(response => {
       expect(response).toEqual({results, status} as MapGeocoderResponse);
     });
   });

diff --git a/src/google-maps/map-geocoder/map-geocoder.ts b/src/google-maps/map-geocoder/map-geocoder.ts
@@ -7,7 +7,7 @@
  */
 
 // Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
-/// <reference types="googlemaps" />
+/// <reference types="google.maps" />
 
 import {Injectable, NgZone} from '@angular/core';
 import {Observable} from 'rxjs';
@@ -40,7 +40,7 @@ export class MapGeocoder {
 
       this._geocoder.geocode(request, (results, status) => {
         this._ngZone.run(() => {
-          observer.next({results, status});
+          observer.next({results: results || [], status});
           observer.complete();
         });
       });

diff --git a/src/google-maps/map-ground-overlay/map-ground-overlay.ts b/src/google-maps/map-ground-overlay/map-ground-overlay.ts
@@ -7,7 +7,7 @@
  */
 
 // Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
-/// <reference types="googlemaps" />
+/// <reference types="google.maps" />
 
 import {Directive, Input, NgZone, OnDestroy, OnInit, Output} from '@angular/core';
 import {BehaviorSubject, Observable, Subject} from 'rxjs';
@@ -131,7 +131,7 @@ export class MapGroundOverlay implements OnInit, OnDestroy {
    */
   getBounds(): google.maps.LatLngBounds {
     this._assertInitialized();
-    return this.groundOverlay.getBounds();
+    return this.groundOverlay.getBounds()!;
   }
 
   /**

diff --git a/src/google-maps/map-heatmap-layer/map-heatmap-layer.spec.ts b/src/google-maps/map-heatmap-layer/map-heatmap-layer.spec.ts
@@ -162,5 +162,5 @@ describe('MapHeatmapLayer', () => {
 class TestApp {
   @ViewChild(MapHeatmapLayer) heatmap: MapHeatmapLayer;
   options?: Partial<google.maps.visualization.HeatmapLayerOptions>;
-  data?: HeatmapData;
+  data?: HeatmapData|null;
 }
diff --git a/src/google-maps/map-heatmap-layer/map-heatmap-layer.ts b/src/google-maps/map-heatmap-layer/map-heatmap-layer.ts
@@ -7,7 +7,7 @@
  */
 
 // Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
-/// <reference types="googlemaps" />
+/// <reference types="google.maps" />
 
 import {
   Input,

diff --git a/src/google-maps/map-info-window/map-info-window.ts b/src/google-maps/map-info-window/map-info-window.ts
@@ -7,7 +7,7 @@
  */
 
 // Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
-/// <reference types="googlemaps" />
+/// <reference types="google.maps" />
 
 import {
   Directive,
@@ -147,7 +147,7 @@ export class MapInfoWindow implements OnInit, OnDestroy {
    */
   getContent(): string|Node {
     this._assertInitialized();
-    return this.infoWindow.getContent();
+    return this.infoWindow.getContent()!;
   }
 
   /**
@@ -157,7 +157,7 @@ export class MapInfoWindow implements OnInit, OnDestroy {
    */
   getPosition(): google.maps.LatLng|null {
     this._assertInitialized();
-    return this.infoWindow.getPosition();
+    return this.infoWindow.getPosition() || null;
   }
 
   /**

diff --git a/src/google-maps/map-kml-layer/map-kml-layer.ts b/src/google-maps/map-kml-layer/map-kml-layer.ts
@@ -7,7 +7,7 @@
  */
 
 // Workaround for: https://github.com/bazelbuild/rules_nodejs/issues/1265
-/// <reference types="googlemaps" />
+/// <reference types="google.maps" />
 
 import {
   Directive,
@@ -110,15 +110,15 @@ export class MapKmlLayer implements OnInit, OnDestroy {
    */
   getDefaultViewport(): google.maps.LatLngBounds {
     this._assertInitialized();
-    return this.kmlLayer.getDefaultViewport();
+    return this.kmlLayer.getDefaultViewport()!;
   }
 
   /**
    * See developers.google.com/maps/documentation/javascript/reference/kml#KmlLayer.getMetadata
    */
   getMetadata(): google.maps.KmlLayerMetadata {
     this._assertInitialized();
-    return this.kmlLayer.getMetadata();
+    return this.kmlLayer.getMetadata()!;
   }
 
   /**