State updates causes the library to include Google JS API multiple times

[caritasverein]

If you implement ReactLeafletGoogleLayer and update the state of your page, for example with an useState, you will get an error/warning from the Google API:

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

You can recreate this issue using the example below.

import { render } from "react-dom";
import { MapContainer } from "react-leaflet";
import ReactLeafletGoogleLayer from "react-leaflet-google-layer";

function App() {
  const [x, setX] = useState(0);

  setTimeout(() => {
    setX(x + 1);
  }, 3000);

  return (
    <div>
      {x}
      <MapContainer
        style={{ height: "500px", width: "100%" }}
        zoom={13}
        center={[10, 10]}
      >
        <ReactLeafletGoogleLayer />
      </MapContainer>
    </div>
  );
}

const rootElement = document.getElementById("root");
render(<App />, rootElement);

Am i missing something here?

[caritasverein]

https://codesandbox.io/s/basic-usage-with-react-leaflet-v3-state-update-bug-f4ybt?file=/src/index.tsx

[aviklai]

@caritasverein Hi,

You are right - this happens because I upgraded the google-maps dependency. I will check if I can somehow configure or I will roll back to the previous version. I will update here.

[aviklai]

@caritasverein Hi,

I released a fix for this - please check the latest version. Here is a working example: https://codesandbox.io/s/basic-usage-with-react-leaflet-v3-state-update-bug-forked-mztcm

[caritasverein]

It works like a charme! Thank you for your fast response and for your fix!