Trying to fetch place suggestions from Google API using Ember js. Below is the code snippet for the service module:
fetch(){
let url=`https://maps.googleapis.com/maps/api/place/autocomplete/json?input=IL&types=geocode&key=API_KEY`
return Ember.RSVP.resolve(Ember.$.ajax(url,{
method: 'GET'
}))
.then(
(response)=>{
console.log("google suggested places:",response);
return response;
})
*The above URL, when accessed with API_KEY and pasted in browser, returns a JSON response with suggested places.
I can see the JSON response in the network tab of developer tools, but the .then function is unable to capture the response and displays it as undefined in the console.
Reference: https://developers.google.com/places/web-service/autocomplete#place_autocomplete_results
When checking the console, I see the error message "Failed to load https://maps.googleapis.com/maps/api/place/autocomplete/json?input=IL&types=geocode&key=API_KEY: No 'Access-control-Allow_origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access."
What could be the issue here?