為什么我的 Google Maps API 被嵌入但沒有顯示在 HTML 頁面上？

Question

下面是我正在使用的代碼，但是頁面上沒有顯示地圖。 通常它是一個 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>

我的 Java 腳本

<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添加到 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 密鑰，並且您的項目已啟用計費。 請參閱 Google 的入門指南。

從您的代碼中使用 jsfiddle： https ://jsfiddle.net/6sm9vjew/

為什么我的 Google Maps API 被嵌入但沒有顯示在 HTML 頁面上？

問題描述

1 個解決方案

解決方案1
1 已采納 2020-08-25 15:32:02

為什么我的 Google Maps API 被嵌入但沒有顯示在 HTML 頁面上？

問題描述

1 個解決方案

解決方案1 1 已采納 2020-08-25 15:32:02

解決方案1
1 已采納 2020-08-25 15:32:02