[SOLVED] Google Places Autocomplete along with google maps

Google Places Autocomplete along with google maps - load issue

I am using google-maps-react in my project.

Now i need to integrate places api inside the maps.

But it seems there is some load order issue and so i am getting the following error.

Error: [react-places-autocomplete]: Google Maps JavaScript API library must be loaded. See: https://github.com/kenny-hibino/react-places-autocomplete#load-google-library

If i remove the places component, the maps works fine.

I need both the components to work together.

Any idea on how to fix this?

Solution

As the error states Google Maps JavaScript API library must be loaded, the following options could be considered. To load statically by adding a reference to public/index.html:

<script src="https://maps.googleapis.com/maps/api/js?key=--GOOGLE-MAPS-KEY--&libraries=places"></script-->

or, for example, via google-maps-react GoogleApiWrapper HOC like this:

export default GoogleApiWrapper({
  apiKey: "--GOOGLE-MAPS-KEY--",
  libraries: ["places"]
})(MapContainer);

This demo demonstrates how to integrate react-places-autocomplete and google-maps-react