Angular2 : How to get google place's photos from place id?

Question

I want to retrive google place photos from place id in my angular2 application. I'm getting placeId from Autocomplete method.

I'm using angular2-google-map library.

import { Component, NgZone, Inject, OnInit, ViewChild, EventEmitter, ElementRef } from '@angular/core';
import { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AgmCoreModule, MapsAPILoader } from 'angular2-google-maps/core';

declare var google: any;

@Component({
  selector: 'add-location-component',
  templateUrl: './addLocation.component.html'
})
export class AddLocationComponent implements OnInit {

  private googlePlaceId: any;

  @ViewChild("search")
  public searchElementRef: ElementRef;
  public searchControl: FormControl;

  constructor(
    public authService: AuthService,
    private mapsAPILoader: MapsAPILoader,
    @Inject(NgZone) private ngZone: NgZone
  ) { }

  ngOnInit() {
    this.searchControl = new FormControl();
    this.mapsAPILoader.load().then(() => {
      let autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
        types: ["address"]
      });
      autocomplete.addListener("place_changed", () => {
        this.ngZone.run(() => {
          let place = autocomplete.getPlace();
          if (place.geometry === undefined || place.geometry === null) {
            return;
          }
          this.googlePlaceId = place.place_id;
          console.log(this.googlePlaceId);
        });
      });
    });
  }

}

By using place_id or lattitude and longitude I want to fetch first 10 photos of that place. I'm stuck here with angular2-google-map.

Can you guys help me. Thanks.

Answer 1

With this placeId, you'd use the PlacesService class. You call the getDetails method and in the callback you receive a PlaceResult which has a photos property (it's an array of PhotoPlace on which you call the getUrl method to retrieve the displayable picture).

(that implies you have retrieved the Place library as well as the core google maps API library)

function RetrievePhotoUrlsFromPlaceId(placeId) {
  /* Instantiate a placesService */
  var placesService = new google.maps.places.PlacesService();

  /* Get place details */
  placesServices.getDetails({
    placeId: placeId
  }, (placeResult, status) => {
    if(status === 'OK') {
      var photos = placeResult.photos;
      var urls = []; // we will store the urls here

      photos.forEach((photo) => {
        urls.push(photo.getUrl({
          maxWidht: 500, // at least set one or the other - mandatory
          maxHeight: undefined
        }));
      });

      /* You have your URLs here !! */
    }
  });
}

[edit]

Actually there is much simpler since you use the Autocomplete and so you already have a PlaceResult.

function RetrievePhotoUrlsFromPlace(place) {

     var photos = place.photos;
     var urls = []; // we will store the urls here

          photos.forEach((photo) => {
            urls.push(photo.getUrl({
              maxWidht: 500, // at least set one or the other - mandatory
              maxHeight: undefined
            }));
          });

          /* You have your URLs here !! */
        }