Javascript 为什么我的谷歌地图API被嵌入但没有显示在HTML页面上？_Javascript_Html_Wordpress_Google Maps_Google Maps Api 3

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

javascript html wordpress google-maps google-maps-api-3

Javascript 为什么我的谷歌地图API被嵌入但没有显示在HTML页面上？,javascript,html,wordpress,google-maps,google-maps-api-3,Javascript,Html,Wordpress,Google Maps,Google Maps Api 3,下面是我正在使用的代码，但是页面上没有显示地图。通常这是一个css的高度/宽度问题，但这也已得到纠正。它仍然只显示一个空div，其中没有映射我的HTML <!DOCTYPE html> <html> <head> <script defer src="https://maps.googleapis.com/maps/api/js?key=MY KEY HERE &callback=initMap&libraries=pla

下面是我正在使用的代码，但是页面上没有显示地图。通常这是一个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>

您正在使用回调来初始化映射。将

async

添加到Maps API脚本中，并将其放置在末尾的

右侧

  <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密钥，并且在项目上启用了计费。参考谷歌的

从代码中使用JSFIDLE：

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

  <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>