Angular Google Maps - how to access the map itself

Question

I'm using Angular 14 withhttps://github.com/angular/components/tree/main/src/google-maps

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.

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

and my template reads

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

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

Answer 1

Ok, so I needed

@ViewChild(GoogleMap) map: GoogleMap;

then the component was at this.map