'google' is not defined

[q0o0p-kor]

import React, { useState } from "react";
import {
  GoogleMap,
  LoadScript,
  Marker,
  InfoWindow,
} from "@react-google-maps/api";

export default function MapContainer() {
  const mapStyles = {
    height: "100vh",
    width: "100%",
  };

  const defaultCenter = {
    lat: 36.355389,
    lng: 127.365211,
  };

const locations = [
    {
      name: "Location 1",
      location: {
        lat: defaultCenter.lat + 0,
        lng: defaultCenter.lng + 0,
      },
    },
    {
      name: "Location 2",
      location: {
        lat: defaultCenter.lat + 0.001,
        lng: defaultCenter.lng + 0.001,
      },
    },
    {
      name: "Location 3",
      location: {
        lat: defaultCenter.lat + 0.002,
        lng: defaultCenter.lng + 0.002,
      },
    },
    {
      name: "Location 4",
      location: {
        lat: defaultCenter.lat + 0.003,
        lng: defaultCenter.lng + 0.003,
      },
    },
    {
      name: "Location 5",
      location: {
        lat: defaultCenter.lat + 0.004,
        lng: defaultCenter.lng + 0.004,
      },
    },
  ];

  const blueMarker = "http://localhost:3000/assets/1.png";

  const [selected, setSelected] = useState({});

  const onSelect = (item) => {
    setSelected(item);
  };


  return (
    <LoadScript googleMapsApiKey="mykey">
      <GoogleMap mapContainerStyle={mapStyles} zoom={18} center={defaultCenter}>
        {locations.map((item) => {
          return (
            <Marker
              key={item.name}
              position={item.location}
              onClick={() => onSelect(item)}
              icon={{
                url: blueMarker,
                origin: new google.maps.Point(0, 0),
              }}
            />
          );
        })}
        {selected.location && (
          <InfoWindow
            position={selected.location}
            clickable={false}
            onCloseClick={() => setSelected({})}
          >
            <p>{selected.name}</p>
          </InfoWindow>
        )}
      </GoogleMap>
    </LoadScript>
  );
}

I'm practicing on this package.
This is my code.
My google.maps is under the <LoadScript />, but why 'google' is not defined?
I added a <script async defer src="https://maps.googleapis.com/maps/api/js?key=mykey&callback=initMap" /> to index.html, but it didn't work.
Next, I will try using useLoadScript.
Is there anything else I can do?

import React, { useState } from "react";
import {
  GoogleMap,
  Marker,
  InfoWindow,
  useLoadScript,
} from "@react-google-maps/api";

export default function MapPage() {
  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: "mykey", // ,
    // ...otherOptions
  });

  const mapStyles = {
    height: "100vh",
    width: "100%",
  };

  const defaultCenter = {
    lat: 36.355389,
    lng: 127.365211,
  };

  const locations = [
    {
      name: "Location 1",
      location: {
        lat: defaultCenter.lat + 0,
        lng: defaultCenter.lng + 0,
      },
    },
    {
      name: "Location 2",
      location: {
        lat: defaultCenter.lat + 0.001,
        lng: defaultCenter.lng + 0.001,
      },
    },
    {
      name: "Location 3",
      location: {
        lat: defaultCenter.lat + 0.002,
        lng: defaultCenter.lng + 0.002,
      },
    },
    {
      name: "Location 4",
      location: {
        lat: defaultCenter.lat + 0.003,
        lng: defaultCenter.lng + 0.003,
      },
    },
    {
      name: "Location 5",
      location: {
        lat: defaultCenter.lat + 0.004,
        lng: defaultCenter.lng + 0.004,
      },
    },
  ];

  const blueMarker = "http://localhost:3000/assets/1.png";
  const greenMarker = "http://localhost:3000/assets/2.png";
  const yellowMarker = "http://localhost:3000/assets/3.png";
  const redMarker = "http://localhost:3000/assets/4.png";

  const [selected, setSelected] = useState({});

  const onSelect = (item) => {
    setSelected(item);
  };
  if (loadError) {
    return <div>Map cannot be loaded right now, sorry.</div>;
  } else if (isLoaded) {
    return (
      <GoogleMap mapContainerStyle={mapStyles} zoom={18} center={defaultCenter}>
        {locations.map((item) => {
          return (
            <Marker
              key={item.name}
              position={item.location}
              onClick={() => onSelect(item)}
              icon={{
                url: blueMarker,
                origin: new google.maps.Point(0, 0),
              }}
            />
          );
        })}
        {selected.location && (
          <InfoWindow
            position={selected.location}
            clickable={false}
            onCloseClick={() => setSelected({})}
          >
            <p>{selected.name}</p>
          </InfoWindow>
        )}
      </GoogleMap>
    );
  } else {
    return <></>;
  }
}

useLoadScript also produces a 'google' is not defined error.
What should I do?

[itsmeyaw]

Hey, I stumbled upon this problem, too. Apparently you need to check if the script is fully loaded by using isLoaded from return value of useLoadScript(). If it is not yet loaded, you should not return the GoogleMap yet. I would strongly refer to this: https://www.youtube.com/watch?v=9e-5QHpadi0

[kimitaka]

Try window.google.maps.Point(0, 0) instead of google.maps.Point(0, 0)