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

[jhoriascos]

Hi, I'm new to React and Ionic

I'm working with Google Maps so I am using:

• "@react-google-maps/api": "^2.17.1",
• "react-google-autocomplete": "^2.7.2",

The error I'm getting is:
You have included the Google Maps JavaScript API multiple times on this page. This may cause unexpected errors.

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.

I need to include the two libraries in the same page, can someone help me or do you have an example of how to implement them?

I am sharing the basic example code I am using to test the integration of the two libraries on the same page.

`
import React, {useState} from "react";

import { IonSearchbar } from "@ionic/react";
import { IonList } from "@ionic/react";
import { IonItem } from "@ionic/react";
import { searchCircle } from "ionicons/icons";

import useGoogle from "react-google-autocomplete/lib/usePlacesAutocompleteService";
import { GoogleMap, LoadScript } from '@react-google-maps/api';
import { useLoadScript } from '@react-google-maps/api'

const MyMap: React.FC = ({}) => {

    const {
        placePredictions,
        getPlacePredictions,
        isPlacePredictionsLoading,
      } = useGoogle({
        apiKey: API_KEY_GOOGLE_MAPS,
      });
      const [value, setValue] = useState("");
  
    return(
        <>
        <IonSearchbar 
            searchIcon={searchCircle} 
            placeholder="Ingrese un lugar"
            debounce={1000}
            value={value}
            onIonChange={(ev) => {
                getPlacePredictions({ input: ev.target.value});
                setValue(ev.target.value);
            }}
        ></IonSearchbar>

        <IonList>
            {placePredictions.map(
                place => (
                    <IonItem onClick={() => setValue(place.description)}>
                        {place.description}
                    </IonItem>
                )
            )}
        </IonList>
                
        <LoadScript
        googleMapsApiKey={API_KEY_GOOGLE_MAPS}
      >
        <GoogleMap

          center={{
            lat: -3.745,
            lng: -38.523
          }}
          zoom={10}
        >
          { /* Child components, such as markers, info windows, etc. */ }
          <></>
        </GoogleMap>
      </LoadScript>
      </>
    );
}

export default MyMap;

`

[nonybrighto]

Having same issue. For now, I had to delay the loading of the map for some seconds so that the auto complete initializes first. It is just a hack but still doesn't solve the issue. They need to share a common config. I will try using <script>

[mayankpandav]

@jhoriascos any solution ?

[talluskaarlo]

Hi @nonybrighto. did you find any solution?

[ciruz]

check this out:
#89 (comment)
#89 (comment)