Angular 2 agm library for google maps setting place by id

Question

I implement a google map on the page, where the place identifier is transmitted to me, then I need to get such a place identifier and load a map with this marker. I was looking through the documentation, but it is not clear how I can target the map object from the <agm-map> so that I can set the place identifier. Here is the piece of code:

  public latitude: number; public longitude: number; public zoom: number; public placeid: string; constructor( private mapsAPILoader: MapsAPILoader, private ngZone: NgZone ) {} ngOnInit() { //set google maps defaults this.zoom = 4; this.latitude = 39.8282; this.longitude = -98.5795; this.placeid = "ChIJMS2FahDQzRIRcJqX_aUZCAQ"; //set current position this.setCurrentPosition(); this.mapsAPILoader.load().then(() => { //How do i set the agm-map here to load the map with the placeid }); } private setCurrentPosition() { if ("geolocation" in navigator) { navigator.geolocation.getCurrentPosition((position) => { this.latitude = position.coords.latitude; this.longitude = position.coords.longitude; this.zoom = 12; }); } } 

Then in the html file I have something like this:

 <agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom"> <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker> </agm-map> 

I looked at the GOOGLE documentation and it seems to set the place id, you need something like this

 var request = { placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4' }; service = new google.maps.places.PlacesService(map); service.getDetails(request, callback); function callback(place, status) { if (status == google.maps.places.PlacesServiceStatus.OK) { createMarker(place); } } 

The problem is that I'm not sure what to pass for map , since I am using <agm-map> .

Answer 1

You can use the mapReady output mapReady for agm-map . Change your html to

 <agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom" (mapReady)="mapReady($event)"> <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker> </agm-map> 

and define the following functions in your component. This function will be called when your card is ready.

 mapReady($event: any) { // here $event will be of type google.maps.Map // and you can put your logic here to get lat lng for marker. I have just put a sample code. You can refactor it the way you want. this.getLatLong('ChIJN1t_tDeuEmsRUsoyG83frY4', $event, null); } getLatLong(placeid: string, map: any, fn) { let placeService = new google.maps.places.PlacesService(map); placeService.getDetails({ placeId: placeid }, function (result, status) { console.log(result.geometry.location.lat()); console.log(result.geometry.location.lng()) }); } 

Modify / reformat this sample code according to your needs so that you can set values ​​for the latitude and longitude parameters that you pass in html.

 <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker>