feat(google-maps): Getting google.maps.Map instance (#23856)

Added mapInitialized event which is emitted when the map is initialized and returns the map instance.

For #23703

Author: umernaeem217

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

@@ -363,6 +363,18 @@ describe('GoogleMap', () => {
     expect(mapConstructorSpy.calls.mostRecent()?.args[1].mapTypeId).toBe('satellite');
   });
 
+  it('should emit mapInitialized event when the map is initialized', () => {
+    mapSpy = createMapSpy(DEFAULT_OPTIONS);
+    mapConstructorSpy = createMapConstructorSpy(mapSpy);
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.detectChanges();
+
+    expect(fixture.componentInstance.mapInitializedSpy).toHaveBeenCalledOnceWith(
+      fixture.componentInstance.map.googleMap,
+    );
+  });
+
   it('should emit authFailure event when window.gm_authFailure is called', () => {
     mapSpy = createMapSpy(DEFAULT_OPTIONS);
     mapConstructorSpy = createMapConstructorSpy(mapSpy);
@@ -397,7 +409,8 @@ describe('GoogleMap', () => {
                          [mapTypeId]="mapTypeId"
                          (mapClick)="handleClick($event)"
                          (centerChanged)="handleCenterChanged()"
-                         (mapRightclick)="handleRightclick($event)">
+                         (mapRightclick)="handleRightclick($event)"
+                         (mapInitialized)="mapInitializedSpy($event)">
             </google-map>`,
 })
 class TestApp {
@@ -412,4 +425,5 @@ class TestApp {
   handleClick(event: google.maps.MapMouseEvent) {}
   handleCenterChanged() {}
   handleRightclick(event: google.maps.MapMouseEvent) {}
+  mapInitializedSpy = jasmine.createSpy('mapInitialized');
 }

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

@@ -104,6 +104,10 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
   }
   private _options = DEFAULT_OPTIONS;
 
+  /** Event emitted when the map is initialized. */
+  @Output() readonly mapInitialized: EventEmitter<google.maps.Map> =
+    new EventEmitter<google.maps.Map>();
+
   /**
    * See
    * https://developers.google.com/maps/documentation/javascript/events#auth-errors
@@ -305,6 +309,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
         this.googleMap = new google.maps.Map(this._mapEl, this._combineOptions());
       });
       this._eventManager.setTarget(this.googleMap);
+      this.mapInitialized.emit(this.googleMap);
     }
   }
 

tools/public_api_guard/google-maps/google-maps.md

@@ -65,6 +65,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
     readonly mapDrag: Observable<void>;
     readonly mapDragend: Observable<void>;
     readonly mapDragstart: Observable<void>;
+    readonly mapInitialized: EventEmitter<google.maps.Map>;
     readonly mapMousemove: Observable<google.maps.MapMouseEvent>;
     readonly mapMouseout: Observable<google.maps.MapMouseEvent>;
     readonly mapMouseover: Observable<google.maps.MapMouseEvent>;
@@ -92,7 +93,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
     set zoom(zoom: number);
     readonly zoomChanged: Observable<void>;
     // (undocumented)
-    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 ɵcmp: i0.ɵɵComponentDeclaration<GoogleMap, "google-map", ["googleMap"], { "height": "height"; "width": "width"; "mapTypeId": "mapTypeId"; "center": "center"; "zoom": "zoom"; "options": "options"; }, { "mapInitialized": "mapInitialized"; "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, ["*"]>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<GoogleMap, never>;
 }