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

benderlidze · 2020-12-16T12:03:32Z

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.

The text was updated successfully, but these errors were encountered:

cgmndev · 2021-01-11T16:44:55Z

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

adrielgro · 2021-02-12T22:45:46Z

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

ErrorPro · 2021-04-20T15:41:17Z

@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 · 2021-05-14T17:47:44Z

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 · 2021-05-19T19:36:03Z

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 · 2021-05-20T14:39:17Z

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 · 2021-05-21T13:17:52Z

✋🏽 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 · 2021-05-21T15:08:57Z

@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 · 2021-05-23T15:48:09Z

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 · 2021-10-19T22:01:36Z

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 · 2021-12-08T17:36:29Z

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 · 2021-12-08T18:26:19Z

@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 · 2022-01-15T12:45:29Z

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

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

bek-sidikovich02 · 2022-02-07T08:49:49Z

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

mschipperheyn · 2022-03-13T22:09:58Z

One thing to be aware of that even with useLoadScript, you have to make sure that both urls are identical, i.e. contain the same parameters in the same order. I recommend loading the script in a separate component

const MyPlacesComponentImpl = ({ googleMapsScriptBaseUrl }) => { 
    const {
        placesService,
        placePredictions,
        getPlacePredictions,
        isPlacePredictionsLoading,
    } = usePlacesService({
        googleMapsScriptBaseUrl,
    });
   [...] 
}

const libraries = ['places'];
const MyPlacesComponent = ({ googleMapsApiKey, language }) => {
    const { isLoaded, loadError, url } = useLoadScript({
        googleMapsApiKey,
        id: 'google-map',
        libraries,
        language,
    });

    if (!isLoaded) {
        return <Loading />;
    }
    if (loadError) {
        return <LoadingError />;
    }
    return (
        <MyPlacesComponentImpl googleMapsScriptBaseUrl={url} />
    );
}

export default MyPlacesComponent;

popcorn245 · 2022-06-18T21:27:22Z

If using one of the loaders you will need to do a check to see if google maps is already loaded and then use the already existing instance, and you will also need to check to see if the loader exists so that you can wait for the scripts to finish loading before trying again. Here is my code, hope this helps someone who is as lost as I was lol. ^_^

  sleep(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
  }

  async loadGoogleMaps(options?: LoaderOptions) {
    if (window?.google) return window.google;
    if ((window as any)?._dk_google_maps_loader_cb) {
      await this.sleep(200);
      return this.loadGoogleMaps();
    }
    try {
      const loader = new Loader(this.googleMapsKey, {
        libraries: ["places"],
        ...options,
      });

      return loader.load();
    } catch (e) {
      console.log(e);
      setTimeout(this.loadGoogleMaps.bind(this), 2000);
    }
  }

NOTE: I am using google-maps package
https://github.com/davidkudera/google-maps-loader#readme

vitorcosta039 · 2022-07-18T20:09:09Z

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

bek-sidikovich02 · 2022-07-19T09:52:36Z

thanks bro yes I solved

…

On Tue, Jul 19, 2022 at 12:09 AM Vitor Costa ***@***.***> wrote: @thebiltheory <https://github.com/thebiltheory> did you manage to solve the problem? i have the same settings as you — Reply to this email directly, view it on GitHub <#89 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AW6UMDD56SHBXLY35IUSFBTVUW2XBANCNFSM4U537DOQ> . You are receiving this because you commented.Message ID: ***@***.***>

bek-sidikovich02 · 2022-10-11T06:55:06Z

Thanks,so much! Marc

…

On Mon, Mar 14, 2022 at 3:10 AM Marc Schipperheyn ***@***.***> wrote: One thing to be aware of that even with useLoadScript, you have to make sure that both urls are identical, i.e. contain the same parameters in the same order. I recommend loading the script in a separate component const MyPlacesComponentImpl = ({ googleMapsScriptBaseUrl }) => { const { placesService, placePredictions, getPlacePredictions, isPlacePredictionsLoading, } = usePlacesService({ googleMapsScriptBaseUrl, }); [...] } const libraries = ['places']; const MyPlacesComponent = ({ googleMapsApiKey, language }) => { const { isLoaded, loadError, url } = useLoadScript({ googleMapsApiKey, id: 'google-map', libraries, language, }); if (!isLoaded) { return <Loading />; } if (loadError) { return <LoadingError />; } return ( <MyPlacesComponentImpl googleMapsScriptBaseUrl={url} /> ); } export default MyPlacesComponent; — Reply to this email directly, view it on GitHub <#89 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AW6UMDC47B42IVEDTDOYHGDU7ZRUFANCNFSM4U537DOQ> . Triage notifications on the go with GitHub Mobile for iOS <https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675> or Android <https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub>. You are receiving this because you commented.Message ID: ***@***.***>

9alex12 · 2022-12-12T14:49:31Z

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

raja-muhammad-asher · 2023-01-12T18:14:05Z

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

AlainYRS · 2023-02-08T02:47:16Z

I have the same problem but:
-I am working in two independent components to be used on demand when they were required at any moment in any project so they can't share a url or anything.
-What could I do when both components are needed in the same project since they suppose to be provided with props/parameters (ApiKey) without any code modification?

raja-muhammad-asher · 2023-02-08T09:54:34Z

I have the same problem but: -I am working in two independent components to be used on demand when they were required at any moment in any project so they can't share a url or anything. -What could I do when both components are needed in the same project since they suppose to be provided with props/parameters (ApiKey) without any code modification?

Please use
const {isLoaded} = useLoadScript({ googleMapsApiKey: YOUR_API_KEY, })

in both components. It should resolve your problem

AlainYRS · 2023-02-10T14:23:15Z

I have the same problem but: -I am working in two independent components to be used on demand when they were required at any moment in any project so they can't share a url or anything. -What could I do when both components are needed in the same project since they suppose to be provided with props/parameters (ApiKey) without any code modification?

Please use const {isLoaded} = useLoadScript({ googleMapsApiKey: YOUR_API_KEY, })

in both components. It should resolve your problem

Thanks, it can fix my multiple Api calls but unfortunately there is a new error "ReferenceError: google is not defined" since I use GoogleMap too.

Do you have an idea of how could it be fixed?

hayatkhan1196 · 2023-06-08T05:15:51Z

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

ewarrenG · 2024-07-25T22:55:17Z

Has anyone experienced this across two separate components? In one I use autocomplete, in another I use maps. In the autocomplete example, I follow the example material ui provides. In the maps example, I follow the example react google maps provides.

Has anyone come up with a solution to load the Google Maps API once for these two different usecases?

Thanks in advance!

CamiloTass · 2024-07-29T19:25:02Z

Hi, I see that there are many examples but I keep getting the same problem. When I load the google-places-autocomplete component I keep getting the problem that: You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors. And when both things get blocked, the Google map stops searching for places. Here I leave the code to know if I am doing something wrong or if someone found the solution and can help me.


const API_KEY_GOOGLE_MAPS = import.meta.env.VITE_API_KEY_GOOGLE_MAPS

export const CreateTravel = () => {
	return (
<div className='w-[40%]'>
<APIProvider apiKey={API_KEY_GOOGLE_MAPS}>
					<MapGoogle
						customControlPermission
						MapHandlerPermission
						UndoRedoControlPermission
						dispatch={dispatch}
						state={state}
						selectedPlace={selectedPlace}
					/>
				</APIProvider>
								<span>lugar de inicio</span>
								<GooglePlacesAutocomplete
									apiKey={API_KEY_GOOGLE_MAPS}
									autocompletionRequest={{
										bounds: [{ lat: 50, lng: 50 }]
									}}
									onLoadFailed={(error) =>
										console.error('Could not inject Google script --------------', error)
									}
									selectProps={{
										value,
										onChange: setValue
									}}
								/>
							</div>
	)
}

gorillah · 2024-09-12T23:39:57Z

"use client";

import { LoadScript, Libraries } from "@react-google-maps/api";
import React, { useState, useEffect } from "react";

const GOOGLE_LIBRARIES: Libraries = ["places", "marker"];

const LoadGoogleProvider = ({ children }: { children: React.ReactNode }) => {
  const [isLoaded, setIsLoaded] = useState(false);
  const [error, setError] = useState<string | null>(null);

  useEffect(() => {
    if (!process.env.NEXT_PUBLIC_GOOGLE_API_KEY) {
      setError("Google Maps API key is missing.");
    }
  }, []);

  const onLoad = () => setIsLoaded(true);
  const onError = () => setError("Failed to load Google Maps");

  return process.env.NEXT_PUBLIC_GOOGLE_API_KEY ? (
    <LoadScript
      googleMapsApiKey={process.env.NEXT_PUBLIC_GOOGLE_API_KEY}
      libraries={GOOGLE_LIBRARIES}
      onLoad={onLoad}
      onError={onError}
    >
      {isLoaded ? children : <p>Loading Google Maps...</p>}
      {error && <p>{error}</p>}
    </LoadScript>
  ) : (
    <p>{error}</p>
  );
};

export default LoadGoogleProvider;

this worked for me, make sure to wrap with layout where your using google components

penderuk · 2024-10-10T11:57:07Z

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>

Thanks, @ErrorPro! This worked for me. I'm using react-google-autocomplete and @vis.gl/react-google-maps on the same page.

Update:
I tested it further and encountered the same errors again. What I did was pass apiKey="" to the APIProvider of @vis.gl/react-google-maps since react-google-autocomplete already initializes the Maps script before the map is rendered. This means the Maps script is already in the DOM.

ErrorPro closed this as completed Apr 20, 2021

jacobpastorek mentioned this issue Dec 2, 2022

Multiple google components on same project #192

Closed

ciruz mentioned this issue Mar 26, 2024

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

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

benderlidze commented Dec 16, 2020

cgmndev commented Jan 11, 2021

adrielgro commented Feb 12, 2021

ErrorPro commented Apr 20, 2021

pekac commented May 14, 2021

ErrorPro commented May 19, 2021 •

edited

Loading

pekac commented May 20, 2021 •

edited

Loading

thebiltheory commented May 21, 2021

ErrorPro commented May 21, 2021 •

edited

Loading

ErrorPro commented May 23, 2021

GarryOne commented Oct 19, 2021 •

edited

Loading

izzyworks89 commented Dec 8, 2021

JAndresHJGlobant commented Dec 8, 2021

im-tridevsharma commented Jan 15, 2022

bek-sidikovich02 commented Feb 7, 2022

mschipperheyn commented Mar 13, 2022

popcorn245 commented Jun 18, 2022

vitorcosta039 commented Jul 18, 2022

bek-sidikovich02 commented Jul 19, 2022 via email

bek-sidikovich02 commented Oct 11, 2022 via email

9alex12 commented Dec 12, 2022

raja-muhammad-asher commented Jan 12, 2023

AlainYRS commented Feb 8, 2023

raja-muhammad-asher commented Feb 8, 2023

AlainYRS commented Feb 10, 2023

hayatkhan1196 commented Jun 8, 2023

ewarrenG commented Jul 25, 2024

CamiloTass commented Jul 29, 2024 •

edited

Loading

gorillah commented Sep 12, 2024 •

edited

Loading

penderuk commented Oct 10, 2024 •

edited

Loading

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

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

Comments

benderlidze commented Dec 16, 2020

cgmndev commented Jan 11, 2021

adrielgro commented Feb 12, 2021

ErrorPro commented Apr 20, 2021

pekac commented May 14, 2021

ErrorPro commented May 19, 2021 • edited Loading

pekac commented May 20, 2021 • edited Loading

thebiltheory commented May 21, 2021

ErrorPro commented May 21, 2021 • edited Loading

ErrorPro commented May 23, 2021

GarryOne commented Oct 19, 2021 • edited Loading

izzyworks89 commented Dec 8, 2021

JAndresHJGlobant commented Dec 8, 2021

im-tridevsharma commented Jan 15, 2022

bek-sidikovich02 commented Feb 7, 2022

mschipperheyn commented Mar 13, 2022

popcorn245 commented Jun 18, 2022

vitorcosta039 commented Jul 18, 2022

bek-sidikovich02 commented Jul 19, 2022 via email

bek-sidikovich02 commented Oct 11, 2022 via email

9alex12 commented Dec 12, 2022

raja-muhammad-asher commented Jan 12, 2023

AlainYRS commented Feb 8, 2023

raja-muhammad-asher commented Feb 8, 2023

AlainYRS commented Feb 10, 2023

hayatkhan1196 commented Jun 8, 2023

ewarrenG commented Jul 25, 2024

CamiloTass commented Jul 29, 2024 • edited Loading

gorillah commented Sep 12, 2024 • edited Loading

penderuk commented Oct 10, 2024 • edited Loading

ErrorPro commented May 19, 2021 •

edited

Loading

pekac commented May 20, 2021 •

edited

Loading

ErrorPro commented May 21, 2021 •

edited

Loading

GarryOne commented Oct 19, 2021 •

edited

Loading

CamiloTass commented Jul 29, 2024 •

edited

Loading

gorillah commented Sep 12, 2024 •

edited

Loading

penderuk commented Oct 10, 2024 •

edited

Loading