0

I'm trying to use Google Places' API to get a list of cities to display. I was trying to use the Autocomplete feature to get a JSON that I could then parse. But I'm getting the following error: 

Failed to load 
https://maps.googleapis.com/maps/api/place/autocomplete/json?
input=New&types=(cities)&key=AIzaSyBVgF-ywjsdsWx6JMZNR0UlUL8q67wM5m8: 
No 'Access-Control-Allow-Origin' header is present on the requested 
resource. Origin 'http://localhost:4200' is therefore not allowed 
access.

I have the following as my API request:

searchCities(searchTerm: String) {
  const url = 
       'https://maps.googleapis.com/maps/api/place/autocomplete/json?
       input=' + searchTerm +
       '&types=(cities)&key=AIzaSyBVgF-ywjsdsWx6JMZNR0UlUL8q67wM5m8';
return this.http.get(url)
  .map((response: Response) => {
    return response.json();
  });
}

How can I resolve this?

AP730
  • 43
  • 1
  • 6
  • what about your google API console, have you added localhost as white list domain? – Alexander Bondarenko Dec 10 '17 at 20:25
  • How do I do that? I have the following in my server.js file: res.header("Access-Control-Allow-Origin", "*"); – AP730 Dec 10 '17 at 20:40
  • The only supported way to call the Place Autocomplete API from a web app is [using the Places library in the way it’s documented](https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete). The code example in the question isn’t using the library in the way the documented — it’s not going to work to call `http.get` on an `https://maps.googleapis.com/maps/api/` endpoint. See the example in the answer at https://stackoverflow.com/questions/43443836/angular-cors-jsonp-and-google-maps-http-api-calls/43444274#43444274 – sideshowbarker Dec 11 '17 at 03:12
  • I mean to add config here https://console.developers.google.com/apis/dashboard – Alexander Bondarenko Dec 13 '17 at 18:57

0 Answers0