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

[benderlidze]

Hi, thanks for your component, it is great.
I have a leaflet map with react-leaflet-google-layer and it is using google API too.
Got a problem with this You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.
I tried to add/remove <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key="> to different parts of the index.html, does not help.
"react-google-autocomplete": "^1.2.6",
Is there any way to fix this?
Thanks.

[cgmndev]

I have the same problem when I use it in conjunction with the react-google-places-autocomplete library

[adrielgro]

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

[ErrorPro]

@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!

[pekac]

Hey @ErrorPro!

Got something related to this issue.

I am using:

• google-map-react v2.1.9
• react-google-autocomplete v2.1.2

The error I'm getting is:
Google maps places API must be loaded

Ofc, once the map is removed from the same page - the autocomplete works properly!
Also, the map component works both with the autocomplete and without it :)

[ErrorPro]

hey @pekac ! Thanks for your message. We tried to reproduce the issue but unfortunately, we could not. Could you add some more info or show/send the piece of code how you are using it?
Also, how do you add the google script to your website? It seems like you have google but do not have google maps places
https://monosnap.com/file/RDqGF7o5Dx4kyivGCykZNMAxJoBRow
https://monosnap.com/file/kskdTqChukqlS7Wbaccfcy1uL7bGdg

[pekac]

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 :)

[thebiltheory]

✋🏽 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

[ErrorPro]

@thebiltheory Hey, is it possible to share a piece of code(if it's the same component). I want to understand the flow, which lib first gets to load google API, thanks! P.S. I have some ideas about what might cause it and I am checking it out

[ErrorPro]

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>

[GarryOne]

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'], }} />

[izzyworks89]

How? @GarryOne
I am using both.
"@react-google-maps/api": "^2.1.1",
"react-google-autocomplete": "^2.1.2",
How do i do that

[JAndresHJGlobant]

@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'], });

[im-tridevsharma]

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

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

[bek-sidikovich02]

Hi guys!
I have been using react-google-autocomplete so far, but it can not show usa regions and cities also street number, pls
I need to have your favour