I have a function in which I am using AJAX to make a call to the Google Places API, but this is returning a CORS error. The API is both a client and server API, thus the API does allow CORS, but I'm still getting an error. JSONP is not supported.
I have a AJAX call exactly like this elsewhere in my code that makes a call to the Geocode endpoint and it's been working fine. I only get the CORS errors when trying to use the Places endpoint.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[MY_KEY]&libraries=places" async defer>
function getPlaceDetails(placeid) {
$.ajax({
url: 'https://maps.googleapis.com/maps/api/place/details/json?placeid='+placeid+'&key=[MY_KEY]'
}).done(function(res) {
console.log(res);
}).fail(function(err) {
console.log('Error: ' + err.status);
console.log(err);
});
}
As @geocodezip mentioned, rather than making another AJAX call, use the places library already included. Just make sure it's included in the query string like:
src="https://maps.googleapis.com/maps/api/js?key=[MY_KEY]&libraries=places" async defer
Then you'll have .getDetails() available for use.
var request = {
placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
};
service = new google.maps.places.PlacesService(map);
service.getDetails(request, callback);
function callback(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
createMarker(place);
}
}