CORS issue with JavaScript accessing google places API [duplicate]

Question

Tried multiple combinations with header to do a ajax jQuery call to google maps Places API to get the predictions.

I get following error:

Failed to load https://maps.googleapis.com/maps/api/place/autocomplete/json?input=Amsterdam&types=geocode&key=AIzaSyBqYrYm377wh0pgINHBQfadjCokJkj_uVQ&_=1535634162773:

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}

Answer 1

To access the places API from javascript use the Google Maps Javascript API v3 places library.