Question

我正在尝试将Google地图集成到我的网站中，我不知道我做错了什么。我有完全像谷歌的代码，除了我改变了一点CSS，但我换了他们的，他们仍然没有工作。有人看到我不喜欢的东西吗？

<head>
  <style>
    #map {
      width: 100%;
      height: 500px;
    background: #CCC;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script>
    function initMap() {
      var mapDiv = document.getElementById('map');
      var map = new google.maps.Map(mapDiv, {
        center: {lat: 44.540, lng: -78.546},
        zoom: 8
      });
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js" async defer></script>
</body>

Answer 1

您忘记了实际运行初始化函数。只需在函数声明后调用该函数，它就可以工作。

function initMap() {
  var mapDiv = document.getElementById('map');
  var map = new google.maps.Map(mapDiv, {
      center: {lat: 44.540, lng: -78.546},
      zoom: 8
  });
}
initMap();

编辑：正如对该问题的几条评论中所提到的，这也可以通过向脚本src添加&callback=initMap来实现：

<script src="https://maps.googleapis.com/maps/api/js?callback=initMap" async defer>

Google地图未在网站上加载

1 个答案: