feat(google-maps): add event emitter for gm_authFailure callback (#22953)

Author: kgajera

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

@@ -3,6 +3,7 @@
               width="750px"
               [center]="center"
               [zoom]="zoom"
+              (authFailure)="authFailure()"
               (mapClick)="handleClick($event)"
               (mapMousemove)="handleMove($event)"
               (mapRightclick)="handleRightclick()"

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

@@ -107,6 +107,10 @@ export class GoogleMapDemo {
 
   constructor(private readonly _mapDirectionsService: MapDirectionsService) {}
 
+  authFailure() {
+    console.log('Auth failure event emitted');
+  }
+
   handleClick(event: google.maps.MapMouseEvent) {
     this.markerPositions.push(event.latLng.toJSON());
   }

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

@@ -39,6 +39,7 @@ describe('GoogleMap', () => {
 
   afterEach(() => {
     (window.google as any) = undefined;
+    (window as any).gm_authFailure = undefined;
   });
 
   it('throws an error is the Google Maps JavaScript API was not loaded', () => {
@@ -358,6 +359,28 @@ describe('GoogleMap', () => {
     expect(mapConstructorSpy.calls.mostRecent()?.args[1].mapTypeId).toBe('satellite');
   });
 
+  it('should emit authFailure event when window.gm_authFailure is called', () => {
+    mapSpy = createMapSpy(DEFAULT_OPTIONS);
+    mapConstructorSpy = createMapConstructorSpy(mapSpy);
+
+    expect((window as any).gm_authFailure).toBeUndefined();
+
+    const createFixture = () => {
+      const fixture = TestBed.createComponent(TestApp);
+      fixture.detectChanges();
+      spyOn(fixture.componentInstance.map.authFailure, 'emit');
+      return fixture;
+    };
+
+    const fixture1 = createFixture();
+    const fixture2 = createFixture();
+
+    expect((window as any).gm_authFailure).toBeDefined();
+    (window as any).gm_authFailure();
+
+    expect(fixture1.componentInstance.map.authFailure.emit).toHaveBeenCalled();
+    expect(fixture2.componentInstance.map.authFailure.emit).toHaveBeenCalled();
+  });
 });
 
 @Component({

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

@@ -23,12 +23,14 @@ import {
   PLATFORM_ID,
   NgZone,
   SimpleChanges,
+  EventEmitter,
 } from '@angular/core';
 import {isPlatformBrowser} from '@angular/common';
 import {Observable} from 'rxjs';
 import {MapEventManager} from '../map-event-manager';
 
 interface GoogleMapsWindow extends Window {
+  gm_authFailure?: () => void;
   google?: typeof google;
 }
 
@@ -60,6 +62,7 @@ export const DEFAULT_WIDTH = '500px';
 export class GoogleMap implements OnChanges, OnInit, OnDestroy {
   private _eventManager: MapEventManager = new MapEventManager(this._ngZone);
   private _mapEl: HTMLElement;
+  private _existingAuthFailureCallback: GoogleMapsWindow['gm_authFailure'];
 
   /**
    * The underlying google.maps.Map object
@@ -101,6 +104,12 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
   }
   private _options = DEFAULT_OPTIONS;
 
+  /**
+   * See
+   * https://developers.google.com/maps/documentation/javascript/events#auth-errors
+   */
+   @Output() readonly authFailure: EventEmitter<void> = new EventEmitter<void>();
+
   /**
    * See
    * https://developers.google.com/maps/documentation/javascript/reference/map#Map.bounds_changed
@@ -245,6 +254,14 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
             'https://developers.google.com/maps/documentation/javascript/' +
             'tutorial#Loading_the_Maps_API');
       }
+
+      this._existingAuthFailureCallback = googleMapsWindow.gm_authFailure;
+      googleMapsWindow.gm_authFailure = () => {
+        if (this._existingAuthFailureCallback) {
+          this._existingAuthFailureCallback();
+        }
+        this.authFailure.emit();
+      };
     }
   }
 
@@ -293,6 +310,11 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
 
   ngOnDestroy() {
     this._eventManager.destroy();
+
+    if (this._isBrowser) {
+      const googleMapsWindow: GoogleMapsWindow = window;
+      googleMapsWindow.gm_authFailure = this._existingAuthFailureCallback;
+    }
   }
 
   /**

tools/public_api_guard/google-maps/google-maps.d.ts

@@ -1,5 +1,6 @@
 export declare class GoogleMap implements OnChanges, OnInit, OnDestroy {
     _isBrowser: boolean;
+    readonly authFailure: EventEmitter<void>;
     readonly boundsChanged: Observable<void>;
     set center(center: google.maps.LatLngLiteral | google.maps.LatLng);
     readonly centerChanged: Observable<void>;
@@ -46,7 +47,7 @@ export declare class GoogleMap implements OnChanges, OnInit, OnDestroy {
     panBy(x: number, y: number): void;
     panTo(latLng: google.maps.LatLng | google.maps.LatLngLiteral): void;
     panToBounds(latLngBounds: google.maps.LatLngBounds | google.maps.LatLngBoundsLiteral, padding?: number | google.maps.Padding): void;
-    static ɵcmp: i0.ɵɵComponentDeclaration<GoogleMap, "google-map", ["googleMap"], { "height": "height"; "width": "width"; "mapTypeId": "mapTypeId"; "center": "center"; "zoom": "zoom"; "options": "options"; }, { "boundsChanged": "boundsChanged"; "centerChanged": "centerChanged"; "mapClick": "mapClick"; "mapDblclick": "mapDblclick"; "mapDrag": "mapDrag"; "mapDragend": "mapDragend"; "mapDragstart": "mapDragstart"; "headingChanged": "headingChanged"; "idle": "idle"; "maptypeidChanged": "maptypeidChanged"; "mapMousemove": "mapMousemove"; "mapMouseout": "mapMouseout"; "mapMouseover": "mapMouseover"; "projectionChanged": "projectionChanged"; "mapRightclick": "mapRightclick"; "tilesloaded": "tilesloaded"; "tiltChanged": "tiltChanged"; "zoomChanged": "zoomChanged"; }, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<GoogleMap, "google-map", ["googleMap"], { "height": "height"; "width": "width"; "mapTypeId": "mapTypeId"; "center": "center"; "zoom": "zoom"; "options": "options"; }, { "authFailure": "authFailure"; "boundsChanged": "boundsChanged"; "centerChanged": "centerChanged"; "mapClick": "mapClick"; "mapDblclick": "mapDblclick"; "mapDrag": "mapDrag"; "mapDragend": "mapDragend"; "mapDragstart": "mapDragstart"; "headingChanged": "headingChanged"; "idle": "idle"; "maptypeidChanged": "maptypeidChanged"; "mapMousemove": "mapMousemove"; "mapMouseout": "mapMouseout"; "mapMouseover": "mapMouseover"; "projectionChanged": "projectionChanged"; "mapRightclick": "mapRightclick"; "tilesloaded": "tilesloaded"; "tiltChanged": "tiltChanged"; "zoomChanged": "zoomChanged"; }, never, ["*"]>;
     static ɵfac: i0.ɵɵFactoryDeclaration<GoogleMap, never>;
 }