无法通过 google javascript maps api 获取地图，不会引发错误，但 iframe src 是 about:blank

Question

    function initMap() {
        // Styles a map in night mode.
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('maprand'), {
          center: uluru,
          zoom: 12,
        });
      }

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

<body>
<div id="map"></div>
</body>

</html>

我正在使用以下代码：

<script>
function initMap() {
    var uluru = {lat: -25.363, lng: 131.044};
    var map = new google.maps.Map(document.getElementById('map'), {
          center: uluru,
          zoom: 12,
});
}
</script>

它不会抛出任何错误，但是深入到它创建的 div 中会显示以下内容：

<iframe frameborder="0" src="about:blank" style="z-index: -1; position: absolute; width: 100%; height: 100%; top: 0px; left: 0px; border: none;"></iframe>

显然这里的问题是src="about:blank"，但我不知道它为什么这样做。

Answer 1

我认为首先您应该添加地图的高度和宽度，然后检查您的关键规则。

例子：

https://codepen.io/anon/pen/PeBwgQ

function initMap() {
        // Styles a map in night mode.
        var uluru = {lat: -25.363, lng: 131.044};
        var map = new google.maps.Map(document.getElementById('map'), {
          center: uluru,
          zoom: 12,
        });
      }

<script async defer src="https://maps.googleapis.com/maps/api/js?senson=false&callback=initMap"></script>


<div id="map" style="width: 300px; height: 300px"></div>