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

Question

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?

Allin

Answer 1

as mentioned in the official documents, you can access map instance using ViewChild decorator and seems you already added it to the component HTML, you just need to define it in your wrapper component typescript like this:

 @ViewChild(GoogleMap) googleMap: GoogleMap;

and then use it, maybe you need to start using it after AfterViewInit get called to make sure the map component initilaized

Hovey

Answer 2

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);

  }

Rintoul

Thanks for posting the alternative approach. Waiting on the map initialization and then calculating the bounds as southwest and northeast google.maps.LatLng instances building a google.maps.LatLngBounds object to pass into the fitBounds method worked extremely well. – Gnostic

Can you please help on this: #78075503 – Ruminate

Answer 3

Try to use ngAfterViewInit() hook, because map instance not available before it.

Undone

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Apfelstadt