0

I'm trying to query the places autocomplete api by google, using the following snippet

request.get(`https://maps.googleapis.com/maps/api/place/autocomplete/`).query(params)

With the correct params the code will fail, giving me a CORS exception

Failed to load https://maps.googleapis.com/maps/api/place/autocomplete/json?input=amsterdam&key={super secret key}: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:7000' is therefore not allowed access.

If I switch to my network tab, I can see that the request itself is working perfectly fine and that it even returns the date I want it to.

I'm working with superagent-es6-promise.

xomena
  • 31,125
  • 6
  • 88
  • 117
requinard
  • 921
  • 1
  • 11
  • 24
  • Related https://stackoverflow.com/questions/44336773/google-maps-api-no-access-control-allow-origin-header-is-present-on-the-reque/44339169#44339169 and https://stackoverflow.com/questions/43443836/angular-cors-jsonp-and-google-maps-http-api-calls/43444274#43444274 – sideshowbarker Sep 04 '17 at 03:38

1 Answers1

2

The CORS headers are not set for Places API web service on Google backend servers. So you won't be able to call Places API web service from the client side JavaScript code due to the Same-Origin policy of the browsers.

In order to use Places on client side JavaScript you have to use a Places library of Google Maps JavaScript API. The places library has nearby and text search functionality, also autocomplete widget and service very similar to the corresponding web service.

For further details please have a look at the documentation:

https://developers.google.com/maps/documentation/javascript/places

Hope it helps!

xomena
  • 31,125
  • 6
  • 88
  • 117
  • It turns out I was already loading these libraries through google-map-react and I simply had to extend that to get access to the places API. – requinard Sep 05 '17 at 07:08