Tried multiple combinations with header to do a ajax jQuery call to google maps Places API to get the predictions.
I get following error:
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://stackoverflow.com' is therefore not allowed access.
while executing following code here in console (without the API Key in the URL):
jQuery.ajax({
type: 'GET',
url: "https://maps.googleapis.com/maps/api/place/autocomplete/json?input=Amsterdam&types=geocode&key={API Key Here}",
contentType: "application/json",
dataType: 'json',
"crossDomain": true,
headers: {
'Access-Control-Allow-Headers': 'Content-Type, Content-Range, Content-Disposition, Content-Description, x-requested-with, x-requested-by',
"accept": "application/json",
"Access-Control-Allow-Origin":"*"
},
success: postSuccess,
error: postError,
});
function postSuccess(result,status,xhr) {
console.log("postSuccess");
}
function postError(xhr,status,error) {
console.log("postError", xhr,status,error);
}
Would be great if someone can point me towards the resolution.
Edit: Searched for similar questions before asking one, found this but solution was not helpful.
Edit2: To be more specific, I would like to retrieve the JSON result from Places API in JavaScript: https://maps.googleapis.com/maps/api/place/autocomplete/json?input=Amsterdam&types=geocode&key={API Key Here}
