How to use the @googlemaps/js-api-loader with react . Error "google" not found

Question

I am making this google map component using advanced marker. Earlier I was using the script tag but later I saw that the docs write something about the js package mentioned in the title.

import React, { useEffect, useState, useLayoutEffect } from "react";
import { v4 as uuidv4 } from "uuid";
import { createRoot } from "react-dom/client";
import Typography from "@mui/material/Typography"; // Update the import statement
import busTopViewImage from "../assets/bus-top-view.png";
import { Grid } from "@mui/material";
import { Loader } from "@googlemaps/js-api-loader";

const Marker = ({ text, backgroundColor }) => {
  return (
    <Grid
      container
      justifyContent="stretch"
      alignItems="center"
      direction="column"
    >
      <img src={busTopViewImage} alt="Bus Marker" />
      {text && backgroundColor && (
        <Grid
          item
          style={{
            backgroundColor: backgroundColor,
            borderRadius: "10px",
            padding: "0 0.5rem",
          }}
        >
          <Typography variant="body1" color="white">
            {text}
          </Typography>
        </Grid>
      )}
    </Grid>
  );
};
interface ICenter {
  lat: number | string;
  lng: number | string;
}

const Map = ({ center, markers }: { center: ICenter }) => {
  const [mapId, setMapId] = useState<string | null>(null);

  useEffect(() => {
    async function initMap() {
      const loader = new Loader({
         ... api key ....

        version: "weekly",
      });
      const { Map } = await loader.importLibrary("maps");
      const { AdvancedMarkerElement } = await loader.importLibrary("marker");

      const map = new Map(document.getElementById(mapId) as HTMLElement, {
        center,
        zoom: 14,
        mapId: `${mapId}${100 + Math.floor(100 * Math.random())}`,
      });
      let mapMarkers = [];
      for (let markerData of markers) {
        const markerComponent = document.createElement("div");
        const root = createRoot(markerComponent);
        
        root.render(<Marker {...markerData.marker} />);
        const m = new AdvancedMarkerElement({
          map,
          position: markerData.coordinates,
          content: markerComponent,
        });
        mapMarkers.push(m);
      }
    }
    if (mapId) {
      initMap();
    }
  }, [mapId, markers]);

  useEffect(() => {
    setMapId(uuidv4());
  }, []);
  if (mapId)
    return <div id={mapId} style={{ width: "100%", height: "100%" }}></div>;
  else return <></>;
};
export default Map;

I am getting the error in console

Uncaught (in promise) ReferenceError: google is not defined
    initMap Map.tsx:37
    Map Map.tsx:70
    React 9
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    js scheduler.development.js:571
    js scheduler.development.js:633
    __require chunk-ROME4SDB.js:11
    js index.js:6
    __require chunk-ROME4SDB.js:11
    React 2
    __require chunk-ROME4SDB.js:11
    js React
    __require chunk-ROME4SDB.js:11
    js React
    __require chunk-ROME4SDB.js:11
    <anonymous> react-dom_client.js:38

Please help.

I tried https://github.com/googlemaps/js-api-loader and Warning:Google Maps already loaded outside @googlemaps/js-api-loader and 'google' is not defined Using Google Maps JavaScript API Loader

UPDATE: The error occurred due to a mistake on my part. Initially, I used the Map component locally in one of the pages. Later, I decided to extract it as a common component to be used across multiple pages. However, I forgot to remove the Map component local to the page and update the import path to the common Map component. This led to the error because I removed the script tag that was essential for the other Map component, which relied on it in the index.html.

Apologies for any inconvenience caused.

Answer 1

Have you properly created your loader? For example:

const loader = new Loader({
      apiKey: process.env.GOOGLE_MAPS_API_KEY,
      version: "weekly",
      libraries: ["places"]
      });