React应用加载Google Maps空白问题求助

核心问题与修正代码 #

你的代码主要问题是地图容器没有设置高度，同时存在无效属性配置。以下是修正后的完整代码：

import React from 'react'
import GoogleMapReact from 'google-map-react'

function Mapp() {
  const coordinates = { lat: 0, lng: 0 }

  return (
    // 给容器设置明确的宽高
    <div className='map__container' style={{ height: '80vh', width: '100%' }}>
      <GoogleMapReact
        bootstrapURLKeys={{ key: 'AIzaSyDX73JHrCuz5VcmSZgRLrdovodtcFNTku8' }}
        defaultCenter={coordinates}
        defaultZoom={14}
        // 移除无效的onChange空字符串，不需要可直接删除该属性
      />
    </div>
  )
}

export default Mapp;

关键修复点说明 #

• 设置容器高度：GoogleMapReact依赖父容器的尺寸渲染地图，默认map__container无高度设置会被压缩为0，导致地图无法显示。可通过内联样式或CSS类设置明确高度（如80vh占视口高度80%，或固定像素值）。
• 清理无效属性：onChange需传入监听地图变化的函数，空字符串会引发异常，不需要可直接删除；center与defaultCenter重复，静态坐标仅保留defaultCenter即可，center用于动态更新地图中心的场景。
• 验证API密钥：确保你的Google Maps API密钥已启用JavaScript Maps API，且无配额超限、IP限制错误，可在Google Cloud控制台的API服务列表中确认状态。

额外注意事项 #

• 如果用CSS类设置容器样式，确保map__container样式生效：

.map__container {
  height: 80vh;
  width: 100%;
}

• 测试时可更换坐标（比如{ lat: 39.9042, lng: 116.4074 }对应北京），确认地图能正常加载到目标区域。

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