React项目中Google Maps JavaScript API页面不显示问题求助

根据你提供的代码，地图加载完成后无显示的问题可以从以下几个关键点排查修复：

1. mapContainerClassName 属性使用错误 #

你的代码中把样式对象传给了mapContainerClassName，但该属性仅接收CSS类名字符串。要传递内联样式，应该使用mapContainerStyle属性。

修改Map.js的返回部分： #

return (
  <GoogleMap
    zoom={15}
    center={{ lat: -33.8140, lng: 151.0034 }} // 替换为帕拉马塔的实际坐标
    mapContainerStyle={{ width: "100%", height: "400px" }} // 用正确属性传递样式
  ></GoogleMap>
);

如果想用CSS类控制样式，先在对应CSS文件中定义：

.map-container {
  width: 100%;
  height: 400px;
}

再修改Map.js：

mapContainerClassName="map-container"

2. 环境变量的引号问题 #

.env.local中的API密钥不要添加双引号，否则引号会被当作密钥的一部分，导致API验证失败：

NEXT_PUBLIC_GOOGLE_MAPS_API_KEY=AIzaSyCH4EPZrF5cvUmM9luEsNdOehQuRyJgAzk

3. 检查API密钥权限 #

确保你的Google Cloud账号已启用Maps JavaScript API，并且密钥没有设置过于严格的访问限制（比如错误的IP/HTTP referrer限制），限制不当会导致地图无法加载。

4. 父容器高度缺失 #

地图所在的父容器（ContactUs.js中包裹<Map />的<div>）如果没有设置高度，会导致地图元素高度为0，无法显示。可以直接给父容器添加样式：

<div style={{ width: "100%", height: "400px" }}>
  <Map />
</div>

内容的提问来源于stack exchange，提问作者Paris Vinuya