谷歌地图不显示，HTML

Question

我目前正在开发一个 IP 跟踪程序，但我在使用 google 地图功能时遇到一些问题，我无法让地图显示或在 IP 位置上放置标记。有人能指出我正确的方向吗？

这是我用于地图的代码，我从谷歌自己的网站上获取的。

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

<script>
  var map;
  function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
      center: {lat: -34.397, lng: 150.644},
      zoom: 8
    });
  }
</script>

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAnoX8LSgSg5-pRiF5_IzZ313VsNZzuo-4&callback=initMap"
 async defer></script>

这是我的完整代码：

Answer 1

要显示地图，您需要提供height。

在您的样式中为带有 id 的 div 添加此高度map

 #map {
     height: 300px;
 }

更新：

如果地图容器（带有 id 地图）应占据 HTML 主体高度的 100%。请注意，我们还必须专门声明 和 的这些百分比。

 #map {
    height: 100%;
 }

 html, body {
    height: 100%;
    margin: 0;
    padding: 0;
 }