Google Places Autocomplete along with google maps - load issue

user_723334 0
Viewed 10013

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?

google-maps-react reactjs google-maps
2 Answers

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

user_13755530

i use @react-google-maps/api. the solution for me was to add places to libraries field

const {isLoaded} = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_API_KEY as string,
    libraries: ["places"]
});
user_53288910
Related