feat(GoogleMap): Expose map for use with other apis

[simonh1000]

Feature Description

I have a map loaded on my screen, but I also want to use the Places Api. Although geocoding is supported by the library, places is not.

The map, and map instance, are created solely through my template

        <google-map [options]="options" class="col-sm-8">
            <map-marker
                [options]="markerOptions"
                [position]="markerPosition"
            ></map-marker>
        </google-map>

I have been trying the following code

        const map1: any = document.querySelector("google-map") as unknown;
        console.log("lookup", map1)

        const map2: GoogleMap = map1;
        var request = {
            query: 'albina',
            fields: ['name', 'geometry'],
        };
        var service = new google.maps.places.PlacesService(map2);
        service.findPlaceFromQuery(request, (results, status) => console.log(results, status))

This works in javascript - the querySelector returns the dom node, but it can be passed successfully to PlacesService. As I am using typescript I keep being told that I can't pass an html element (not withstanding my attempts to override the type).

Really what I want is to access the map as is, rather than using dom lookups, but I cannot work out how to access that. As you can see, I am able to create and pass options to the component, but don't know angular well enough to get the map back

Use Case

I also want to use the Places Api which requires me to pass a google map. the obvious candidate is the one created by this component, but I cannot see how to access it

[crisbeto]

I think that we should wrap the Places API eventually. For what it's worth, you can interact with the map instance directly by getting a hold of the GoogleMap component and accessing its googleMap property: https://github.com/angular/components/blob/main/src/google-maps/google-map/google-map.ts#L72

[simonh1000]

@crisbeto how would I get hold of the GoogleMap component - this is just a question of not understanding how Angular works

[crisbeto]

Something like this:

import {ViewChild} from '@angular/core';
import {GoogleMap} from '@angular/google-maps';

@Component()
class YourComponent {
  @ViewChild(GoogleMap) map: GoogleMap;

  ngAfterViewInit() {
    console.log(this.map);
  }
}

[crisbeto]

Closing as a duplicate of #23514.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}