Google Places Autocomplete along with google maps - load issue

Question

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?

Answer 1

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