XMLHttpRequest cannot load No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' Google maps

Question

I am new to React js I am trying to simple dynamically changing map with respected to user input But for specific place seach request this error rises

Answer 1

The CORS headers are not set for Places API web service on Google backend servers. So you won't be able to call Places API web service from the client side JavaScript code due to the Same-Origin policy of the browsers.

In order to use Places on client side JavaScript you have to use a Places library of Google Maps JavaScript API. The places library has nearby, radar and text search functionality very similar to the corresponding web service.

For further details please have a look at the documentation:

https://developers.google.com/maps/documentation/javascript/places

Hope it helps!