HTML 加载时无法获取 Google 地图 API

Question

我正在尝试通过 Blix 移动模板 在我的站点联系页面上运行 Google 映射 API，但是我相信，由于联系人页面是在主页上加载的，或者由于具有 MAP API 源的自定义脚本根本不会被调用。我知道我想要的代码运行不是问题，但我的脚本根本没有在我的模板中调用，而且我不知道该尝试什么，因为我是初学者。

您可以找到 here 网站本身。我的问题是联系页面。

        #map{
            height: 80%;
            width: 80%;
        }
        html,body{
            height: 100%;
            margin: 0;
            padding:0;
        }

        <div id="map">
<script>
            console.log("test 1");
          var map;
          function initMap() {
          map = new google.maps.Map(
              document.getElementById('map'),
        
              {center: new google.maps.LatLng(40, 20), zoom: 16});
              console.log("test 2");
        
          var iconBase =
              'https://developers.google.com/maps/documentation/javascript/examples/full/images/';
              console.log("test 3");
        
          var icons = {
            info: {
              icon: iconBase + 'info-i_maps.png'
            }
          };
              console.log("test 4");
        
          var features = [
            {
              position: new google.maps.LatLng(40, 20),
              type: 'info'
            }
          ];
              console.log("test 5");
        
          // Create markers.
          for (var i = 0; i < features.length; i++) {
            var marker = new google.maps.Marker({
              position: features[i].position,
              icon: icons[features[i].type].icon,
              map: map
            });
          };
            console.log("test 6");
        }
        </script>
        <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCg9sodxDOjqPW1H5Xkmqu1ed1TPDVt1E0&callback=initMap"></script>

Answer 1

需要在实际JS之前加载Maps Script，然后在JS中调用最底层的函数，所以请使用：

#map {
  height: 80%;
  width: 80%;
}

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

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

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCg9sodxDOjqPW1H5Xkmqu1ed1TPDVt1E0"></script>

<script>
  var map;

  function initMap() {
    map = new google.maps.Map(
      document.getElementById('map'),

      {
        center: new google.maps.LatLng(40, 20),
        zoom: 16
      });

    var iconBase =
      'https://developers.google.com/maps/documentation/javascript/examples/full/images/';

    var icons = {
      info: {
        icon: iconBase + 'info-i_maps.png'
      }
    };

    var features = [{
      position: new google.maps.LatLng(40, 20),
      type: 'info'
    }];

    // Create markers.
    for (var i = 0; i < features.length; i++) {
      var marker = new google.maps.Marker({
        position: features[i].position,
        icon: icons[features[i].type].icon,
        map: map
      });
    };
  }

  initMap();
</script>

Answer 2

您已在 HTML 正文底部添加了地图 div。在联系人页面中添加 <div id="map">。

Answer 3

这是完整的 HTML 文件：

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8" />

  <style>
    #map {
      height: 80%;
      width: 80%;
    }
    
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

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

  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCg9sodxDOjqPW1H5Xkmqu1ed1TPDVt1E0"></script>

  <script>
    var map;

    function initMap() {
      map = new google.maps.Map(
        document.getElementById('map'),

        {
          center: new google.maps.LatLng(40, 20),
          zoom: 16
        });

      var iconBase = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/';

      var icons = {
        info: {
          icon: iconBase + 'info-i_maps.png'
        }
      };

      var features = [{
        position: new google.maps.LatLng(40, 20),
        type: 'info'
      }];

      // Create markers.
      for (var i = 0; i < features.length; i++) {
        var marker = new google.maps.Marker({
          position: features[i].position,
          icon: icons[features[i].type].icon,
          map: map
        });
      };
    }

    initMap();
  </script>
</body>

</html>

HTML 加载时无法获取 Google 地图 API

Can't get Google maps API when HTML loads

html

javascript

css

google-apps