CORB Blocking Google Places API Call
I'm trying to implement custom google places autocomplete and my browser (Google Chrome Version 68.0.3440.106) is blocking my request while calling their API. Here is written that this API can be used both server & client side. The API key is correct. What am I missing? CORB Error
Answer
CORB blocks a response that has JSON, HTML or XML inside. It's a security measure. In order to achieve what you desire is not by ajax calls. When attaching the maps script tags, inside the script you have to mention which libraries you want to use, and it will be imported in the DOM. Afterward, you have to generate the object and do the filtering.
Ex: So instead of doing ajax calls for a finding places you call the constructor and pass the arguments.
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDI2Fgh7xK7JfbUXTVSundJUNfIpHITbTY&libraries=places&callback=operationalMap"></script>
var places = new google.maps.places.PlacesService(map),
populateMapWithMyLocation = [//array with geolocation lat & lng];
populateMapWithMyLocations.forEach(function(result){
places.getDetails(result, function(response){
console.log(response)
})
});
P.S.: Use the same approach for the photo library, nearby search, text search.
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM