React项目中Google Map无法渲染问题求助（不使用react-google-maps）

嘿，我之前帮好几个开发者解决过类似的原生Google Maps API在React里不加载的问题，不用第三方库完全没问题，咱们来一步步排查你可能踩的坑：

1. 确保DOM节点已完全挂载（最常见的坑） #

你用componentDidMount是正确的时机，但直接用document.getElementById('map')有时候会因为React的渲染机制出现不确定性——更稳妥的方式是用React的Ref来获取DOM节点，避免手动DOM查询的问题：

import React, { Component } from 'react';

class GoogleMap extends Component {
  constructor(props) {
    super(props);
    // 创建Ref关联地图容器
    this.mapContainer = React.createRef();
  }

  componentDidMount() {
    // 先确认Ref已经关联到真实DOM节点
    if (!this.mapContainer.current) return;

    // 初始化地图
    this.map = new window.google.maps.Map(this.mapContainer.current, {
      center: { lat: -34.397, lng: 150.644 }, // 示例坐标
      zoom: 8,
    });
  }

  render() {
    return (
      {/* 用Ref绑定容器，同时设置明确的宽高 */}
      <div ref={this.mapContainer} id="map" style={{ width: '100%', height: '400px' }}></div>
    );
  }
}

export default GoogleMap;

2. 必须等Google Maps API脚本加载完成再初始化 #

如果是在public/index.html里手动引入API脚本，一定要加async defer，确保脚本加载完成后才会执行初始化代码：

<!-- 放在index.html的<head>标签内 -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=你的API密钥"></script>

如果是在组件内动态加载脚本（比如按需加载），一定要监听脚本的load事件，再执行地图初始化：

componentDidMount() {
  const script = document.createElement('script');
  script.src = `https://maps.googleapis.com/maps/api/js?key=你的API密钥`;
  script.async = true;
  script.defer = true;

  // 脚本加载完成后再初始化地图
  script.addEventListener('load', () => {
    if (this.mapContainer.current) {
      this.map = new window.google.maps.Map(this.mapContainer.current, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 8,
      });
    }
  });

  document.head.appendChild(script);
}

3. 给地图容器设置明确的宽高！ #

这是最容易被忽略的点！如果你的#map容器没有设置具体的宽高样式，地图会因为容器尺寸为0而完全不显示。一定要给容器设置固定高度（比如400px），或者确保父容器有明确高度后用百分比：

// 行内样式或者CSS类都可以，这里用行内示例
<div ref={this.mapContainer} id="map" style={{ width: '100%', height: '400px', border: '1px solid #eee' }}></div>

4. 检查API密钥的配置 #

去Google Cloud控制台确认：

• 你的API密钥已经启用了Maps JavaScript API
• 密钥没有超出配额限制
• 没有设置错误的HTTP引用限制（比如只允许特定域名访问，而你的开发域名不在列表里）

5. 查看浏览器控制台的错误提示 #

打开浏览器开发者工具（F12）的Console标签，看看有没有具体报错：

• 如果是google is not defined：说明API脚本还没加载完就执行了初始化代码
• 如果是InvalidKeyMapError：API密钥无效或未启用对应API
• 如果是其他地图相关错误：根据提示调整初始化参数

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