react-google-autocomplete: You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors

If you’re using this package alongside with google-map-react, you can just tell the last package to include the places api.

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

✋🏽 Same here.

Using:

• "@react-google-maps/api": "^2.1.1",
• "react-google-autocomplete": "^2.1.2",

You have included the Google Maps JavaScript API multiple times on this page.
This may cause unexpected errors.


Uncaught (in promise) TypeError: Cannot read property 'um' of undefined

@izzyworks89 You could try by setting the API key and the places library by using the useLoadScript provided by @react-google-maps/api. I mean something like this:

const { isLoaded, loadError } = useLoadScript({ googleMapsApiKey: API_KEY, libraries: ['places'], });

@adrielgro @claudiomnec @benderlidze Hi! I’ve just released a new version(v2) which should fix that issue. Please let me know if you still encounter it. Thanks!

Use this code const { isLoaded, loadError } = useLoadScript({ googleMapsApiKey: API_KEY, libraries: ['places'], });

And when rendering Autocomplete, Please enclose Autocomplete in {isLoaded && <AutoComplete />}

Hey @ErrorPro ! Thanks for looking into it so deeply!

It seems like you have google but do not have google maps places

Definitely looks that way.

Give me some time to spin up a min-reproducible repo. I believe this will be the easiest way to pinpoint the issue. Will share it with you afterwards 😃

I had the same problem because of using useLoadScript with and without places in two different components. In one component, places were not required but in the other I needed ‘places’. I made the call to useLoadScript by including ‘places’ in both components and that removed this problem.

const {isLoaded} = useLoadScript({ googleMapsApiKey: YOUR_API_KEY, libraries: ['places'], })

I had the same problem, to solve it replace ‘useJsApiLoader’ by ‘useLoadScript’ both are from the @react-google-maps/api library. const {isLoaded} = useJsApiLoader({ googleMapsApiKey: YOUR_API_KEY, libraries: ['places'], })

const {isLoaded} = useLoadScript({ googleMapsApiKey: YOUR_API_KEY, libraries: ['places'], })

@thebiltheory did you manage to solve the problem? i have the same settings as you

I just found out the way to reproduce it. The problem is that autocomplete library needs places API to be loaded. The only way to load places API via URL. So what happens is: somewhere in the code you already require google map API(any map library or directly) without places API in the URL so that this library sees google available but cannot get access to google.maps.places. The easiest way would be to paste the full URL with all libraries included in the HTML e.g.

<script
  type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=apiKey&libraries=places,anyOtherLib"
></script>

I have the same problem when i use with react-google-autocomplete