React应用中Google Map无法加载的原因排查求助

我跟着教程在React中创建带自定义HTML标记的Google Map，但加载地图时控制台出现Google Maps加载错误，禁用广告拦截后问题依然存在。

可能的解决方向 #

1. 补全并验证API密钥配置 #

• 务必在Wrapper组件的apiKey属性中填写有效的Google Maps API密钥，同时在Google Cloud控制台确认：
  • Maps JavaScript API已启用；
  • 你用到的marker库已关联启用；
  • API密钥的限制规则（HTTP/IP限制）已包含你的开发环境（比如localhost:3000或当前IP）。

2. 修复递归渲染的逻辑问题 #

你的代码存在循环渲染bug：render函数在加载成功时返回<CustomGoogleMap />，而该组件本身又包含<Wrapper>，会导致无限递归加载。调整代码结构如下：

/* eslint-disable no-unused-vars */
import { Wrapper, Status } from '@googlemaps/react-wrapper';
import { CircularProgress, Alert } from '@mui/material';
import React, { useRef, useEffect, useState } from 'react';

export default function CustomGoogleMap() {
  const render = (status) => {
    switch (status) {
      case Status.LOADING:
        return <CircularProgress />;
      case Status.FAILURE:
        return <Alert severity="error">Map Error</Alert>;
      case Status.SUCCESS:
        return <MyCustomMap />;
      default:
        return <div>This is the default</div>;
    }
  };

  return (
    <Wrapper
      apiKey="你的有效API密钥"
      version="beta"
      libraries={['marker']}
      render={render}
    />
  );
}

const mapOptions = {
  mapId: "你的自定义地图ID（可选，无样式需求可移除）",
  center: { lat: 43.66293, lng: -79.39314 },
  zoom: 10,
  disableDefaultUI: true,
};

function MyCustomMap() {
  const [map, setMap] = useState();
  const ref = useRef();

  useEffect(() => {
    // 确保google对象加载完成后再初始化地图
    if (window.google?.maps) {
      setMap(new window.google.maps.Map(ref.current, mapOptions));
    }
  }, []);

  // 给地图容器设置固定尺寸，否则无法渲染
  return <div ref={ref} id="map" style={{ height: '400px', width: '100%' }} />;
}

3. 给地图容器添加尺寸 #

原代码中的地图容器没有设置高度和宽度，这会导致地图初始化后无法显示，甚至触发加载异常。给<div ref={ref}>添加基础样式（比如height: 400px; width: 100%;）。

4. 排查依赖兼容性 #

@googlemaps/react-wrapper的beta版本可能存在兼容性问题，尝试切换到稳定版（如^1.1.35），同时确保React版本与该库适配。

5. 检查网络环境 #

禁用广告拦截后仍有问题的话，排查是否有代理、防火墙阻止了Google Maps资源加载，可尝试切换网络（比如手机热点）测试。

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