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.

ValLeNain · Accepted Answer · 2017-02-21T13:29:07.620

2

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 !! */
        }

edited Feb 21 '17 at 13:29

answered Feb 21 '17 at 12:56

ValLeNain

2,232
1
18
37

I tried as per your solution, But getting this error **google.maps.PlacesService is not a constructor** – Hitesh Balar Feb 21 '17 at 13:13
you probably don't have the Place library loaded – ValLeNain Feb 21 '17 at 13:16
Yes I have added `AgmCoreModule.forRoot({ apiKey: GOOGLEAPIKEY, libraries: [ "places" ] })` – Hitesh Balar Feb 21 '17 at 13:16
my bad it's `new google.maps.places.PlacesService`, I update my post – ValLeNain Feb 21 '17 at 13:20
We need to pass `HTMLDivElement Or Map` as params to `PlacesService();` method ? Its giving an error **Cannot read property 'innerHTML' of undefined** – Hitesh Balar Feb 21 '17 at 13:23
Ok, see my update, you actually already have a `PlaceResult` (the return of `getPlace()`. So you don't need the step where you instantiate a `PlacesService`. – ValLeNain Feb 21 '17 at 13:30
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/136251/discussion-between-hitesh-balar-and-vallenain). – Hitesh Balar Feb 21 '17 at 13:36
How is google.maps.places.PlacesService(); imported? – D.Hodges Nov 07 '19 at 04:05

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

1 Answers1