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

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

Fixes #22818.

Author: crisbeto

package.json

@@ -61,7 +61,7 @@
     "@angular/core": "12.1.2",
     "@angular/forms": "12.1.2",
     "@angular/platform-browser": "12.1.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": "12.0.0-canary.5f00e454a.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,
@@ -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()!;
   }
 
   /**

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';
@@ -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()!;
   }
 
   /**

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