将带有动态数据的地图添加到 Google 协作平台答案

【问题标题】：Adding Map w/ dynamic data to Google Sites将带有动态数据的地图添加到 Google 协作平台
【发布时间】：2021-08-26 21:51:17
【问题描述】：

背景

我正在尝试将 Google 地图添加到（新）Google 协作平台；该地图将有多个标记，其数据会根据 Google 表格随时间而变化。

我在哪里

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

问题

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

代码

代码.gs

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

索引.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 填写在代码中。提前感谢您的任何指点。

【问题讨论】：

Set Google Maps Container DIV width and height 100% 的副本

标签： javascript html google-maps google-apps-script google-sites

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

【讨论】：