0

https://developers.google.com/places/web-service/details

I get CORS error. OK I`ve tried use jsonp in angular and get another error.

Uncaught SyntaxError: Unexpected token :

I think its because gmaps api doesn't support jsonp. Querying Google Places API using jQuery

But how to get place details from API via angular?

code 

const params = new URLSearchParams();
params.append('key', 'MYAPIKEY');
params.append('placeid', placeId);
params.append('callback', 'JSONP_CALLBACK');
const url = 'https://maps.googleapis.com/maps/api/place/details/json';
return this.jsonp.get(url, {search: params});

or

getPlaceDetails(placeId: string) {
const httpParams = new HttpParams()
    .append('key', 'MYAPIKEY')
    .append('placeid', placeId);

const url = 'https://maps.googleapis.com/maps/api/place/details/json';
return this.http.get<PlaceDetail>(url, {params: httpParams}).map(c => c.result);
}

second method works if I use cors chrome extension

Nazar Kalytiuk
  • 1,499
  • 1
  • 11
  • 21

1 Answers1

0

If you use the new Http Client, try this : 

return this.http.get<PlaceDetail>(url, {params: httpParams, observe: 'response'}).map(c => {
  console.log(c);
  return c.result;
});

This will allow you to see the response, contained in the _body field, and do something out of it.

  • I will get `No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5555' is therefore not allowed access.` – Nazar Kalytiuk Feb 14 '18 at 12:44
  • Then resolve your CORS issue. **[A lot of SOF questions are about that](https://stackoverflow.com/questions/42180788/how-to-use-cors-to-implement-javascript-google-places-api-request)**. –  Feb 14 '18 at 12:45