Google Maps JS API报错'Uncaught (in promise) ReferenceError: google is not defined'排查

核心原因推测 #

虽然你在API脚本里设置了callback=initMap，但报错说明在google全局对象初始化完成前，已有代码尝试访问它——地图最终能正常显示，是因为后续API加载完成后补执行了相关逻辑。

具体排查方向及解决方法 #

1. 检查initMap外是否有提前访问google的代码 #

如果你的JS代码里存在类似以下的片段，会直接触发报错：

// 错误示例：在initMap外提前声明依赖google的变量
const markerPos = new google.maps.LatLng(39.9042, 116.4074);

function initMap() {
  // ...地图初始化代码
}

解决方法：把所有依赖google对象的代码，全部移到initMap函数内部，或者确保在google对象存在后再执行。

2. 检查是否手动重复调用了initMap #

如果除了API脚本的callback，你还在其他地方手动调用了initMap（比如window.onload、HTML按钮点击事件），会导致API未加载完成时函数就被执行，触发报错。解决方法：删除所有手动调用initMap的代码，仅保留API脚本的callback触发逻辑。

3. 检查initMap内部的异步逻辑 #

如果initMap使用了async/await或Promise回调，可能因异步执行时机问题触发报错。比如：

async function initMap() {
  // 错误示例：await操作后过早访问google
  const locationData = await fetch('/api/get-locations');
  // 此时google可能还未完全初始化
  const marker = new google.maps.Marker({/*...*/});
}

解决方法：在initMap开头先确认google对象存在，再执行后续逻辑：

function initMap() {
  if (!window.google) {
    setTimeout(initMap, 100);
    return;
  }
  // 地图初始化代码
  const map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -34.397, lng: 150.644},
    zoom: 8
  });
}

4. 检查API脚本的加载顺序 #

确保Google Maps API脚本是最后加载的JS资源，或者至少在你的自定义JS代码之后加载。HTML中的正确顺序示例：

<!-- 先加载自定义JS文件 -->
<script src="./your-map-script.js"></script>
<!-- 再加载Google Maps API脚本，带callback参数 -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

额外验证方法 #

可以在initMap开头添加日志，确认函数执行时google对象的状态：

function initMap() {
  console.log('google对象是否存在:', !!window.google);
  // ...后续地图初始化代码
}

如果日志输出false，说明函数确实被提前调用；如果输出true仍报错，大概率是函数内部的异步逻辑导致。

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