Error from Google when using the library

[DudiKaplan]

Hi , when i use this package i got error on the console

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

It happens to everyone, did you do something wrong?

[DarlonHenrique]

I have the same error here, idk how to solve it using google maps react hooks, im trying to see the original code in repo causing this error, if i found it, i will tell you

[Tmcerlean]

Also have the same error too.

[playhard21]

I am having the same error, what should I need to do?

[architectDrivenKenny]

A temporary fix could be to disabled strict mode - reactStrictMode: false. I also found it useful to change the height unit to vh if the map didn't display properly on the screen

[Facupelli]

Also have the same error.

[Sowed]

I am getting this too, in a Nextjs project. The problem might be when the Map Provider is rendered.

[Schlomoh]

Try Wrapping the map container inside the GoogleMapsProvider, with the react <StrictMode></StrictMode> tag. This does not work with nested StrictMode tags though.

In my case I replaced my index.ts/main.ts code with this to not include the strict mode:

import ReactDOM from "react-dom/client";
import App from "./App.tsx";

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

Then inside the App:

const App = () => {
  const [mapContainer, setMapContainer] = useState<HTMLDivElement | null>(null);
  const mapRef = useCallback(
    (ref: HTMLDivElement) => ref && setMapContainer(ref),
    []
  );

  const mapsOptions: Partial<GoogleMapsConfiguration["mapOptions"]> = {
    center: { lat: 43.75, lng: 17 },
    zoom: 12,
  };

  return (
      <GoogleMapsProvider
        googleMapsAPIKey={MAPS_API_KEY}
        mapContainer={mapContainer}
        mapOptions={mapsOptions}
      >
        <StrictMode>
          <div ref={mapRef} />
        </StrictMode>
      </GoogleMapsProvider>
  );
};

export default App;

[chwoozy]

Any solution to this @yfr