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?

Vadim Gremyachev · Accepted Answer · 2018-12-31T16:55:53.793

9

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

edited Dec 31 '18 at 16:55

answered Dec 31 '18 at 16:40

Vadim Gremyachev

57,952
20
129
193

2

awesome! wouldn't of got this on my own, in my case I am mixing @react-google-maps/api & react-google-autocomplete – Rob Jul 07 '21 at 13:34
1

&libraries=places in the script tag :) – Ryan Dhungel Sep 08 '22 at 00:44

score 5 · Answer 2 · answered Jun 15 '21 at 15:33

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"]
});

Dustin Spengler · Answer 3 · 2022-10-06T22:39:03.923

I was having this issue because I was loading google-map-react and react-google-autocomplete on the same page. I had to tell my google-map-react component to load the places library as well like this:

<GoogleMapReact 
   bootstrapURLKeys={{ 
      key: API_KEY,
      libraries:['places'],
   }} 
/>

The Map component loads the google script first, but does not include the places library unless specified. When you load the autocomplete component after, google sees you already have the map script loaded, so it does not add it again. This is why you must specify all the libraries on the component that loads the google maps script first.

You can read more about this issue here

Google Places Autocomplete along with google maps - load issue

3 Answers3