谷歌地图 API 不会显示

Question

我无法在我的视图中获得谷歌地图

法典

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

// css
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
// scripts
<script async defer 
src="https://maps.googleapis.com/maps/api/js?key=PLACED MY CODE HERE... &callback=initMap"></script>
<script>
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>

结果

我的视图中没有任何显示，控制台或网络选项卡中没有错误。

知道吗？

Answer 1

尝试使用有效的宽度，例如：(仅用于测试(

// css
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 640px;
width:800px;
}