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

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

Fixes #22818.

Author: crisbeto

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