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

Question

下面是我正在使用的代码，但是页面上没有显示地图。通常它是一个 css height/width 问题，但也已得到纠正。它仍然只显示一个空的 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; 
}

Answer 1

您正在使用回调来初始化地图。将 async 添加到地图 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 密钥，并且您的项目已启用计费功能。参考Google的get started guide.

从您的代码中运行 jsfiddle：https://jsfiddle.net/6sm9vjew/

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

Why is my Google Maps API being embedded but not displaying on an HTML Page?

html

javascript

wordpress

google-maps

google-maps-api-3