fix(google-maps): compatibility with latest typings (angular#21441)

Fixes a bunch of compilation errors as a result of a breaking change in the Google Maps
typings.

Fixes angular#21440.

package.json

@@ -58,7 +58,7 @@
     "@angular/elements": "^11.1.0-next.2",
     "@angular/forms": "^11.1.0-next.2",
     "@angular/platform-browser": "^11.1.0-next.2",
-    "@types/googlemaps": "^3.39.3",
+    "@types/googlemaps": "^3.43.0",
     "@types/youtube": "^0.0.40",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js": "^2.6.9",

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

@@ -98,11 +98,11 @@ export class GoogleMapDemo {
   markerClustererImagePath =
       'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m';
 
-  handleClick(event: google.maps.MouseEvent) {
+  handleClick(event: google.maps.MapMouseEvent) {
     this.markerPositions.push(event.latLng.toJSON());
   }
 
-  handleMove(event: google.maps.MouseEvent) {
+  handleMove(event: google.maps.MapMouseEvent) {
     this.display = event.latLng.toJSON();
   }
 

src/google-maps/google-map/README.md

@@ -34,11 +34,11 @@ export class GoogleMapDemo {
   center: google.maps.LatLngLiteral = {lat: 24, lng: 12};
   zoom = 4;
 
-  moveMap(event: google.maps.MouseEvent) {
+  moveMap(event: google.maps.MapMouseEvent) {
     this.center = (event.latLng.toJSON());
   }
 
-  move(event: google.maps.MouseEvent) {
+  move(event: google.maps.MapMouseEvent) {
     this.display = event.latLng.toJSON();
   }
 }

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

@@ -371,7 +371,7 @@ class TestApp {
   options?: google.maps.MapOptions;
   mapTypeId?: google.maps.MapTypeId;
 
-  handleClick(event: google.maps.MouseEvent) {}
+  handleClick(event: google.maps.MapMouseEvent) {}
   handleCenterChanged() {}
-  handleRightclick(event: google.maps.MouseEvent) {}
+  handleRightclick(event: google.maps.MapMouseEvent) {}
 }

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

@@ -120,16 +120,16 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
    * https://developers.google.com/maps/documentation/javascript/reference/map#Map.click
    */
   @Output()
-  mapClick: Observable<google.maps.MouseEvent|google.maps.IconMouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent|google.maps.IconMouseEvent>('click');
+  mapClick: Observable<google.maps.MapMouseEvent|google.maps.IconMouseEvent> = this._eventManager
+      .getLazyEmitter<google.maps.MapMouseEvent|google.maps.IconMouseEvent>('click');
 
   /**
    * See
    * https://developers.google.com/maps/documentation/javascript/reference/map#Map.dblclick
    */
   @Output()
-  mapDblclick: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('dblclick');
+  mapDblclick: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('dblclick');
 
   /**
    * See
@@ -174,24 +174,24 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
    * https://developers.google.com/maps/documentation/javascript/reference/map#Map.mousemove
    */
   @Output()
-  mapMousemove: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('mousemove');
+  mapMousemove: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('mousemove');
 
   /**
    * See
    * https://developers.google.com/maps/documentation/javascript/reference/map#Map.mouseout
    */
   @Output()
-  mapMouseout: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('mouseout');
+  mapMouseout: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('mouseout');
 
   /**
    * See
    * https://developers.google.com/maps/documentation/javascript/reference/map#Map.mouseover
    */
   @Output()
-  mapMouseover: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('mouseover');
+  mapMouseover: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('mouseover');
 
   /**
    * See
@@ -206,8 +206,8 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
    * https://developers.google.com/maps/documentation/javascript/reference/map#Map.rightclick
    */
   @Output()
-  mapRightclick: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('rightclick');
+  mapRightclick: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('rightclick');
 
   /**
    * See

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

@@ -67,80 +67,80 @@ export class MapCircle implements OnInit, OnDestroy {
    * developers.google.com/maps/documentation/javascript/reference/polygon#Circle.click
    */
   @Output()
-  circleClick: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('click');
+  circleClick: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('click');
 
   /**
    * @see
    * developers.google.com/maps/documentation/javascript/reference/polygon#Circle.dblclick
    */
   @Output()
-  circleDblclick: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('dblclick');
+  circleDblclick: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('dblclick');
 
   /**
    * @see
    * developers.google.com/maps/documentation/javascript/reference/polygon#Circle.drag
    */
   @Output()
-  circleDrag: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('drag');
+  circleDrag: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('drag');
 
   /**
    * @see
    * developers.google.com/maps/documentation/javascript/reference/polygon#Circle.dragend
    */
   @Output()
-  circleDragend: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('dragend');
+  circleDragend: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('dragend');
 
   /**
    * @see
    * developers.google.com/maps/documentation/javascript/reference/polygon#Circle.dragstart
    */
   @Output()
-  circleDragstart: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('dragstart');
+  circleDragstart: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('dragstart');
 
   /**
    * @see
    * developers.google.com/maps/documentation/javascript/reference/polygon#Circle.mousedown
    */
   @Output()
-  circleMousedown: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('mousedown');
+  circleMousedown: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('mousedown');
 
   /**
    * @see
    * developers.google.com/maps/documentation/javascript/reference/polygon#Circle.mousemove
    */
   @Output()
-  circleMousemove: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('mousemove');
+  circleMousemove: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('mousemove');
 
   /**
    * @see
    * developers.google.com/maps/documentation/javascript/reference/polygon#Circle.mouseout
    */
   @Output()
-  circleMouseout: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('mouseout');
+  circleMouseout: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('mouseout');
 
   /**
    * @see
    * developers.google.com/maps/documentation/javascript/reference/polygon#Circle.mouseover
    */
   @Output()
-  circleMouseover: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('mouseover');
+  circleMouseover: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('mouseover');
 
   /**
    * @see
    * developers.google.com/maps/documentation/javascript/reference/polygon#Circle.mouseup
    */
   @Output()
-  circleMouseup: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('mouseup');
+  circleMouseup: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('mouseup');
 
   /**
    * @see
@@ -154,8 +154,8 @@ export class MapCircle implements OnInit, OnDestroy {
    * developers.google.com/maps/documentation/javascript/reference/polygon#Circle.rightclick
    */
   @Output()
-  circleRightclick: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('rightclick');
+  circleRightclick: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('rightclick');
 
   constructor(private readonly _map: GoogleMap, private readonly _ngZone: NgZone) {}
 

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

@@ -71,17 +71,17 @@ export class MapGroundOverlay implements OnInit, OnDestroy {
    * developers.google.com/maps/documentation/javascript/reference/image-overlay#GroundOverlay.click
    */
   @Output()
-  mapClick: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('click');
+  mapClick: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('click');
 
   /**
    * See
    * developers.google.com/maps/documentation/javascript/reference/image-overlay
    * #GroundOverlay.dblclick
    */
   @Output()
-  mapDblclick: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('dblclick');
+  mapDblclick: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('dblclick');
 
   constructor(private readonly _map: GoogleMap, private readonly _ngZone: NgZone) {}
 

src/google-maps/map-info-window/README.md

@@ -22,7 +22,7 @@ export class GoogleMapDemo {
   markerPositions: google.maps.LatLngLiteral[] = [];
   zoom = 4;
 
-  addMarker(event: google.maps.MouseEvent) {
+  addMarker(event: google.maps.MapMouseEvent) {
     this.markerPositions.push(event.latLng.toJSON());
   }
 

src/google-maps/map-marker-clusterer/README.md

@@ -29,7 +29,7 @@ export class GoogleMapDemo {
   markerClustererImagePath =
       'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m';
 
-  addMarker(event: google.maps.MouseEvent) {
+  addMarker(event: google.maps.MapMouseEvent) {
     this.markerPositions.push(event.latLng.toJSON());
   }
 }

src/google-maps/map-marker/README.md

@@ -19,7 +19,7 @@ export class GoogleMapDemo {
   markerOptions: google.maps.MarkerOptions = {draggable: false};
   markerPositions: google.maps.LatLngLiteral[] = [];
 
-  addMarker(event: google.maps.MouseEvent) {
+  addMarker(event: google.maps.MapMouseEvent) {
     this.markerPositions.push(event.latLng.toJSON());
   }
 }

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

@@ -107,8 +107,8 @@ export class MapMarker implements OnInit, OnChanges, OnDestroy, MapAnchorPoint {
    * developers.google.com/maps/documentation/javascript/reference/marker#Marker.click
    */
   @Output()
-  mapClick: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('click');
+  mapClick: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('click');
 
   /**
    * See
@@ -129,24 +129,24 @@ export class MapMarker implements OnInit, OnChanges, OnDestroy, MapAnchorPoint {
    * developers.google.com/maps/documentation/javascript/reference/marker#Marker.dblclick
    */
   @Output()
-  mapDblclick: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('dblclick');
+  mapDblclick: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('dblclick');
 
   /**
    * See
    * developers.google.com/maps/documentation/javascript/reference/marker#Marker.drag
    */
   @Output()
-  mapDrag: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('drag');
+  mapDrag: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('drag');
 
   /**
    * See
    * developers.google.com/maps/documentation/javascript/reference/marker#Marker.dragend
    */
   @Output()
-  mapDragend: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('dragend');
+  mapDragend: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('dragend');
 
   /**
    * See
@@ -160,8 +160,8 @@ export class MapMarker implements OnInit, OnChanges, OnDestroy, MapAnchorPoint {
    * developers.google.com/maps/documentation/javascript/reference/marker#Marker.dragstart
    */
   @Output()
-  mapDragstart: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('dragstart');
+  mapDragstart: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('dragstart');
 
   /**
    * See
@@ -180,32 +180,32 @@ export class MapMarker implements OnInit, OnChanges, OnDestroy, MapAnchorPoint {
    * developers.google.com/maps/documentation/javascript/reference/marker#Marker.mousedown
    */
   @Output()
-  mapMousedown: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('mousedown');
+  mapMousedown: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('mousedown');
 
   /**
    * See
    * developers.google.com/maps/documentation/javascript/reference/marker#Marker.mouseout
    */
   @Output()
-  mapMouseout: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('mouseout');
+  mapMouseout: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('mouseout');
 
   /**
    * See
    * developers.google.com/maps/documentation/javascript/reference/marker#Marker.mouseover
    */
   @Output()
-  mapMouseover: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('mouseover');
+  mapMouseover: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('mouseover');
 
   /**
    * See
    * developers.google.com/maps/documentation/javascript/reference/marker#Marker.mouseup
    */
   @Output()
-  mapMouseup: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('mouseup');
+  mapMouseup: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('mouseup');
 
   /**
    * See
@@ -219,8 +219,8 @@ export class MapMarker implements OnInit, OnChanges, OnDestroy, MapAnchorPoint {
    * developers.google.com/maps/documentation/javascript/reference/marker#Marker.rightclick
    */
   @Output()
-  mapRightclick: Observable<google.maps.MouseEvent> =
-      this._eventManager.getLazyEmitter<google.maps.MouseEvent>('rightclick');
+  mapRightclick: Observable<google.maps.MapMouseEvent> =
+      this._eventManager.getLazyEmitter<google.maps.MapMouseEvent>('rightclick');
 
   /**
    * See