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

【问题标题】：Can't get Google maps API when HTML loads加载 HTML 时无法获取 Google 地图 API
【发布时间】：2020-01-29 09:39:21
【问题描述】：

我正在尝试通过 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>

【问题讨论】：

标签： javascript html css google-apps

【解决方案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>

【讨论】：

它在这里工作。您只需单击“运行代码 sn-p”按钮，地图就可以工作了。
我分析了您的联系页面，发现您根本没有包含源 sn-ps。缺少地图的 div 以及地图的整个 JS 脚本。您包含的唯一内容是 CSS。
它们被放置。在联系页面的空白区域，蓝色按钮下方使用检查元素。
好吧，当我使用检查时，我也可以看到它们，但是，当您查看源代码（Chrome 中的 Ctrl + U）时，您可以看到它。这意味着您不是在 html 文件中插入了这些 sn-ps，而是在另一个 JS 文件中注入了它。这是正确的吗？只是为了坚持你的答案。
是的，它在view source上显示的就是主页面，把联系人页面的内容都插入过来了。

【解决方案2】：

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

【讨论】：

【解决方案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>

【讨论】：