我试图在我网站的“联系我们”组件中的React/Javascript代码上使用Google Map API，但Map本身并没有显示。我相信代码正在工作，因为“Loading...”语句在Map加载时出现，但当它加载时什么也没有显示。
下面是ContactUs.js文件中的代码：

import React from "react";
import contactuscss from "./ContactUs.module.css";
import Map from "./Map.js";

function ContactUs() {
  return (
    <div className={contactuscss.container}>
      <h2 className={contactuscss.contactus}>CONTACT US</h2>

      <div className={contactuscss.address}>
        <p>Unit 14 Parramatta Business Centre</p>
        <p>2 O'Connell Street</p>
        <p>Parramatta, NSW 2150</p>
        <p>Tel: +61 435 400 290</p>
      </div>

      <form>
        <div className={contactuscss.inputcontainer}>
          <input
            className={contactuscss.nameinput}
            type="text"
            id="name"
            name="name"
            placeholder="Name"
          />

          <input
            className={contactuscss.emailinput}
            type="text"
            id="email"
            name="email"
            placeholder="Email"
          />

          <input
            className={contactuscss.phoneinput}
            type="phone"
            id="phone"
            name="phone"
            placeholder="Phone"
          />

          <textarea
            className={contactuscss.textinput}
            id="message"
            name="message"
            rows="6"
            placeholder="Type your message here..."
          ></textarea>

          <button className={contactuscss.submitbutton} type="submit">
            Submit
          </button>
        </div>

        <div>
          <Map />
        </div>
      </form>
    </div>
  );
}

export default ContactUs;

下面是Map.js文件中的代码：

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

function Map() {
  const { isLoaded } = useLoadScript({
    googleMapsApiKey: process.env.NEXT_PUBLIC_GOOGLE_MAPS_API_KEY,
  });

  if (!isLoaded) return <div>Loading...</div>;

  return (
    <GoogleMap
      zoom={10}
      center={{ lat: 44, lng: -80 }}
      mapContainerClassName={{ width: "100%", height: "100vh" }}
    ></GoogleMap>
  );
}

export default Map;

下面是我的.env.local文件中的内容：

NEXT_PUBLIC_GOOGLE_MAPS_API_KEY="AIzaSyCH4EPZrF5cvUmM9luEsNdOehQuRyJgAzk"

我不太确定是什么问题-我也利用了youtube上最新的教程，教我如何将这个API上传到我的网页上。