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

Viewed 7545

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 documentation but its not clear on how i can target the map object from the <agm-map> tag so that i can set the place id. Here is part of the 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 on 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 looks like to set the place id you would 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 i have is that i am not sure as to what to pass for map since i am using <agm-map>.

1 Answers
Related