为什么我的 Google Maps API 被嵌入但没有显示在 HTML 页面上？答案

【问题标题】：Why is my Google Maps API being embedded but not displaying on an HTML Page?为什么我的 Google Maps API 被嵌入但没有显示在 HTML 页面上？
【发布时间】：2020-12-12 21:11:19
【问题描述】：

所以下面是我正在使用的代码，但是页面上没有显示地图。通常它是一个 css 高度/宽度问题，但这也已得到纠正。它仍然只显示一个空的 div，其中没有地图。

我的 HTML

<!DOCTYPE html>
<html>
<head>

<script defer
src="https://maps.googleapis.com/maps/api/js?key=MY KEY HERE 
&callback=initMap&libraries=places&v=weekly">

</script>
</head>
<body>

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

</body>
</html>

我的 JAVASCRIPT

<script>

let map;

function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: -34.397, lng: 150.644 },
zoom: 8
});
}


</script>

CSS

#map { 
width: 100%; 
height: 500px; 
border: 1px solid #000; 
}

【问题讨论】：

标签： javascript html wordpress google-maps google-maps-api-3

【解决方案1】：

您正在使用回调来初始化地图。将 async 添加到 Maps API 脚本并将其放在最后的 <body> 中。

  <body>

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

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap&libraries=places&v=weekly"></script>
  </body>

最后确保您使用的是有效的 API 密钥并且在您的项目上启用了计费功能。参考谷歌的get started guide。

在您的代码中使用 jsfiddle：https://jsfiddle.net/6sm9vjew/

【讨论】：