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

Moves the `google-maps` package away from the deprecated typings.

Fixes #22818.

package.json

@@ -58,7 +58,7 @@
     "@angular/core": "13.0.0-next.8",
     "@angular/forms": "13.0.0-next.8",
     "@angular/platform-browser": "13.0.0-next.8",
-    "@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.860ad06a1.0",

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) {

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",
     ],
 )

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();

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,
@@ -370,7 +370,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
    * See
    * https://developers.google.com/maps/documentation/javascript/reference/map#Map.getCenter
    */
-  getCenter(): google.maps.LatLng {
+  getCenter(): google.maps.LatLng | undefined {
     this._assertInitialized();
     return this.googleMap.getCenter();
   }
@@ -379,7 +379,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
    * See
    * https://developers.google.com/maps/documentation/javascript/reference/map#Map.getClickableIcons
    */
-  getClickableIcons(): boolean {
+  getClickableIcons(): boolean | undefined {
     this._assertInitialized();
     return this.googleMap.getClickableIcons();
   }
@@ -388,7 +388,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
    * See
    * https://developers.google.com/maps/documentation/javascript/reference/map#Map.getHeading
    */
-  getHeading(): number {
+  getHeading(): number | undefined {
     this._assertInitialized();
     return this.googleMap.getHeading();
   }
@@ -397,7 +397,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
    * See
    * https://developers.google.com/maps/documentation/javascript/reference/map#Map.getMapTypeId
    */
-  getMapTypeId(): google.maps.MapTypeId|string {
+  getMapTypeId(): google.maps.MapTypeId | string | undefined {
     this._assertInitialized();
     return this.googleMap.getMapTypeId();
   }
@@ -406,9 +406,9 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
    * See
    * https://developers.google.com/maps/documentation/javascript/reference/map#Map.getProjection
    */
-  getProjection(): google.maps.Projection|null {
+  getProjection(): google.maps.Projection | null {
     this._assertInitialized();
-    return this.googleMap.getProjection();
+    return this.googleMap.getProjection() || null;
   }
 
   /**
@@ -424,7 +424,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
    * See
    * https://developers.google.com/maps/documentation/javascript/reference/map#Map.getTilt
    */
-  getTilt(): number {
+  getTilt(): number | undefined {
     this._assertInitialized();
     return this.googleMap.getTilt();
   }
@@ -433,7 +433,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
    * See
    * https://developers.google.com/maps/documentation/javascript/reference/map#Map.getZoom
    */
-  getZoom(): number {
+  getZoom(): number | undefined {
     this._assertInitialized();
     return this.googleMap.getZoom();
   }

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;

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

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

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';
@@ -181,7 +181,7 @@ export class MapCircle implements OnInit, OnDestroy {
    * @see
    * developers.google.com/maps/documentation/javascript/reference/polygon#Circle.getBounds
    */
-  getBounds(): google.maps.LatLngBounds {
+  getBounds(): google.maps.LatLngBounds | null {
     this._assertInitialized();
     return this.circle.getBounds();
   }
@@ -190,7 +190,7 @@ export class MapCircle implements OnInit, OnDestroy {
    * @see
    * developers.google.com/maps/documentation/javascript/reference/polygon#Circle.getCenter
    */
-  getCenter(): google.maps.LatLng {
+  getCenter(): google.maps.LatLng | null {
     this._assertInitialized();
     return this.circle.getCenter();
   }

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,
@@ -106,7 +106,7 @@ export class MapDirectionsRenderer implements OnInit, OnChanges, OnDestroy {
    * See developers.google.com/maps/documentation/javascript/reference/directions
    * #DirectionsRenderer.getDirections
    */
-  getDirections(): google.maps.DirectionsResult {
+  getDirections(): google.maps.DirectionsResult | null {
     this._assertInitialized();
     return this.directionsRenderer.getDirections();
   }
@@ -115,7 +115,7 @@ export class MapDirectionsRenderer implements OnInit, OnChanges, OnDestroy {
    * See developers.google.com/maps/documentation/javascript/reference/directions
    * #DirectionsRenderer.getPanel
    */
-  getPanel(): Node {
+  getPanel(): Node | null {
     this._assertInitialized();
     return this.directionsRenderer.getPanel();
   }

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

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

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

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

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';
@@ -129,7 +129,7 @@ export class MapGroundOverlay implements OnInit, OnDestroy {
    * developers.google.com/maps/documentation/javascript/reference/image-overlay
    * #GroundOverlay.getBounds
    */
-  getBounds(): google.maps.LatLngBounds {
+  getBounds(): google.maps.LatLngBounds | null {
     this._assertInitialized();
     return this.groundOverlay.getBounds();
   }

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

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,

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,
@@ -145,9 +145,9 @@ export class MapInfoWindow implements OnInit, OnDestroy {
    * See
    * developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindow.getContent
    */
-  getContent(): string|Node {
+  getContent(): string | Node | null {
     this._assertInitialized();
-    return this.infoWindow.getContent();
+    return this.infoWindow.getContent() || null;
   }
 
   /**
@@ -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;
   }
 
   /**