网页嵌入Google Maps报错Expected mapDiv of type Element but was passed null如何解决

错误信息：Expected mapDiv of type Element but was passed null
该报错是Google Maps初始化逻辑执行时，用于承载地图的DOM元素未被成功获取，返回值为null导致的。最常见的诱因是代码加载顺序问题：

• initMap初始化函数的相关JS代码，被放在了承载地图的<div>标签之前。页面从上到下解析执行时，JS代码运行到地图初始化逻辑时，对应的div节点还没有被浏览器渲染完成，调用document.getElementById等DOM查询方法只能拿到空值，触发类型校验不通过的报错。

方法一：调整代码顺序（最简便） #

直接调整代码的前后排布顺序即可：将承载地图的HTML div代码放在前面，所有和Google Maps初始化、Geolocation API相关的JS代码放在后面，保证JS执行时目标DOM节点已经存在。

错误写法示例 #

<!-- 错误顺序：JS代码在DOM节点之前 -->
<script>
function initMap() {
  // 此时#map节点还未渲染，返回值为null
  const mapContainer = document.getElementById('map');
  const map = new google.maps.Map(mapContainer, {
    // 地图配置项
  });
}
</script>

<!-- 地图承载节点在JS之后 -->
<div id="map" style="width: 100%; height: 400px;"></div>

正确写法示例 #

<!-- 地图承载节点放在JS之前 -->
<div id="map" style="width: 100%; height: 400px;"></div>

<!-- JS代码放在DOM节点之后 -->
<script>
function initMap() {
  const mapContainer = document.getElementById('map');
  const map = new google.maps.Map(mapContainer, {
    // 地图配置项
  });
}
</script>

方法二：监听DOM加载完成事件 #

如果不方便调整代码顺序，可以将初始化逻辑包裹在DOM加载完成的回调中，确保节点渲染完成后再执行初始化：

<script>
// 等待DOM全部渲染完成后再执行初始化逻辑
document.addEventListener('DOMContentLoaded', function() {
  function initMap() {
    const mapContainer = document.getElementById('map');
    const map = new google.maps.Map(mapContainer, {
      // 地图配置项
    });
  }
})
</script>

<div id="map" style="width: 100%; height: 400px;"></div>

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