1

I'm building a React application right now and trying to use the Google Places API to populate missing place data in my app (business name, description, photo, etc)

I've tried using fetch() as well as the axios library with no luck. Continue to see this error

Failed to load https://maps.googleapis.com/maps/api/place/details/json?placeid=ChIJN1t_tDeuEmsRUsoyG83frY4&key=XXXXXXX: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

Thanks for any help in advance.

user3750413
  • 39
  • 1
  • 3
  • Might be similar to this, check it out: https://stackoverflow.com/questions/39329874/googlemaps-api-key-for-localhost – toffee.beanns Feb 09 '18 at 02:03
  • Could you please copy paste your code here? – penguinsource Feb 09 '18 at 02:48
  • 1
    See https://stackoverflow.com/questions/44336773/google-maps-api-no-access-control-allow-origin-header-is-present-on-the-reque/44339169#44339169 and https://stackoverflow.com/questions/43443836/angular-cors-jsonp-and-google-maps-http-api-calls/43444274#43444274. The Places API isn’t intentionally not CORS-enable. The only supported way to use the Places API is the way the Google documentation for it shows it being used — which doesn’t involve making calls to it using XHR or the Fetch API or Ajax methods from JavaScript libraries. – sideshowbarker Feb 09 '18 at 03:08
  • @sideshowbarker I was afraid that might be the only solution. I have no need to display the map object so I was trying to avoid a hacky work around where I load a map and not display it just to utilize the api. :( Thought this library might help me out, but it still gives a CORS error: https://github.com/mcabs3/google-places-web – user3750413 Feb 09 '18 at 11:06
  • I still can't figure out how to do this in react - I find it insane that the first step forces the user to create the Map component when there are plenty of use cases for using their API without the need to show a map. *Underwhelmed* – user3750413 Feb 09 '18 at 13:45
  • 1
    Places API web service is supposed to be called server-side, on client side you have to use places library of Maps JavaScript API. – xomena Feb 09 '18 at 21:42

1 Answers1

1

There is a lot of confusing information using this libarary, especially with a React project. Here is a solution I was finally able to get working.

index.html

<Head>
  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=XXXXX&libraries=places"
async defer></script>
</Head>
<Body>
  <div id="map"></div>
</Body>

React Component

componentDidMount() {

const googleMap = new window.google.maps.Map(document.getElementById('map'),{center: { lat: -33.867, lng: 151.206 },zoom: 15});

Basically the trick I had to discover was using the window object to get access to my google variable. Now that you have a googleMap you can easily hook into the other google api services. Hope this helps others.

user3750413
  • 39
  • 1
  • 3