无法通过Google JavaScript Maps API加载地图，无报错但iframe为about:blank

遇到这种情况我之前也碰过，大概率是几个容易忽略的小问题导致的，咱们一个个排查解决：

1. 先修复API请求URL的参数拼接错误 #

你看你写的API脚本URL：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=**API-KEY**callback=initMap"></script>

这里**API-KEY**和callback=initMap之间缺了一个&符号！Google Maps API根本识别不了这种参数格式，导致地图资源没正确加载，自然那个内部iframe就只能显示about:blank了。正确的写法应该是把参数用&分隔开：

<script async defer src="https://maps.googleapis.com/maps/api/js?key=你的实际API密钥&callback=initMap"></script>

别忘了把**API-KEY**替换成你在Google Cloud控制台生成的有效密钥，而且要确保这个密钥已经启用了「Maps JavaScript API」的权限哦。

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

你的<div id="map"></div>没有任何样式设置，默认情况下这个div的高度是0，就算地图加载成功了也看不到，甚至会触发API的渲染异常。给它加个样式，比如：

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

或者用CSS类来统一设置，保证容器有足够的空间让地图渲染。

3. 确保initMap函数在全局作用域可访问 #

你写的initMap函数要保证能被Google API的回调找到，最好把它的定义放在API脚本之前（因为async defer会让API脚本异步加载，只要函数在脚本执行前存在就没问题），而且别把它放在局部作用域里（比如嵌套在其他函数里）。完整的正确示例代码可以参考这样：

<html>
<head>
  <script>
    // 先定义全局的initMap函数
    function initMap() {
      var uluru = {lat: -25.363, lng: 131.044};
      var map = new google.maps.Map(document.getElementById('map'), {
        center: uluru,
        zoom: 12,
      });
    }
  </script>
  <!-- 再加载API脚本，参数格式正确 -->
  <script async defer src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&callback=initMap"></script>
  <style>
    #map {
      width: 100vw;
      height: 100vh;
      margin: 0;
      padding: 0;
    }
  </style>
</head>
<body>
<div id="map"></div>
</body>
</html>

按照这几点调整后，应该就能正常加载地图了，那个about:blank的iframe是Google Maps内部的临时元素，只要地图渲染正常，它就会被替换成正确的地图内容啦。

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