将带有动态数据的地图添加到 Google 个站点

Question

背景

我正在尝试将 Google 地图添加到（新）Google 站点；地图将有多个标记，其数据将根据 Google Sheet.

随时间变化

我在哪里

我已经能够使用“嵌入”选项将带有静态数据的地图直接添加到站点，但我需要使用 Google 动态标记的脚本功能。

问题

当使用相同的 html 脚本并将其与 Google 脚本集成时，文本将显示在 Google 站点上而不是地图上。

代码

Code.gs

function doGet() {
  return HtmlService
      .createTemplateFromFile('Index')
      .evaluate();
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Add Map</title>

    <style type="text/css">
      #map {
        height: 100%;
        width: 100%;
      }
    </style>

    <script>

      // Initialize and add the map
      function initMap() {
        // The location of Uluru
        const uluru = { lat: -25.344, lng: 131.036 };
        // The map, centered at Uluru
        const map = new google.maps.Map(document.getElementById("map"), {
          zoom: 4,
          center: uluru,
        });
      }

    </script>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>

    <!-- Async script executes immediately and must be after any DOM elements used in callback. -->
    <script async
      src="https://maps.googleapis.com/maps/api/js?key=<API_KEY>&callback=initMap"
    >
    </script>
  </body>
</html>

代码中填写API_KEY。在此先感谢您的指点。

Answer 1

问题是高度设置为 0 像素；该地图继承自父块元素，该元素未指定大小，导致高度被假定为 0 像素。这可以通过以像素为单位指定高度来解决：

<style type="text/css">
  #map {
    height: 100%;
    width: 100%;
  }
</style>

或指定高度应为 HTML 正文的 100%：

<style type="text/css">
  #map {
    height: 100%;
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>

将带有动态数据的地图添加到 Google 个站点

Adding Map w/ dynamic data to Google Sites

html

javascript

google-maps

google-sites

google-apps-script

背景

我在哪里

问题

代码