Angular 2 agm library for google maps setting place by place id

Question

I am implementing in a page a google map where a place id is passed to me, I then need to obtain such place id and load the map with that marker. I was going through the doc

Answer 1

You can use mapReady output property of 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 following functions in your component. This function will be called when your map 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())
      });
  }

Change / refactor this sample code according to your need such that you are able set values to latitude and longitude parameters that you are passing to html.

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