'Getting google.maps.Map instance from @angular/google-maps

I need to get google.maps.Map. I cannot see official way in docs. But I see that whole component is exportedAs. But when I use it in template:

<google-map [center]="{lat: mapaLat, lng: mapaLng}"
                [zoom]="mapaZoom" [options]="{mapTypeControl: true}"
                #mapInstance="googleMap"></google-map>

it is local variable. How to get it in my component's typescript?

Or maybe there is other way to get google.maps.Map?



Solution 1:[1]

My use case was re-focusing the map once several markers were added and bounds were set.

Using @ViewChild didn't work for me, I had to use the mapInitialized event to get access to the map instance.

<google-map (mapInitialized)="onMapReady($event)" [center]="center" [zoom]="zoom" [options]="mapOptions"> ... </google-map>

  /**
   * Fit bounds and show all available markers after the map is fully loaded
   * @param {google.maps.Map} map : Google Map Instance
   */
  public onMapReady(map: google.maps.Map): void {
    
    map.fitBounds(this.bounds, 20);

  }

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ioana Cucuruzan