Google Sites嵌入Google Scripts实现的动态Google Map不显示问题求助

修复方案 #

1. 核心问题定位

你的地图无法加载主要是两个基础问题导致的：一是map容器没有设置有效高度，二是Google Apps Script默认的输出限制不支持被Google Sites嵌入加载。

2. 修改后的代码

Code.gs

function doGet() {
  return HtmlService
      .createTemplateFromFile('Index')
      .evaluate()
      // 允许被iframe嵌入
      .setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
}

Index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Add Map</title>
    <style type="text/css">
      /* 补充html、body的高度设置，否则map的100%高度无参照，显示为0 */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #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>

3. 配置校验

• 确认你使用的API密钥已在Google Cloud控制台启用Maps JavaScript API
• API密钥的HTTP引用限制需添加两个域名：你部署的Apps Script Web应用域名、你的Google Sites域名
• 重新部署Web应用时，「执行身份」选择你的账号，「有权访问的人」选择「所有人，甚至匿名用户」，部署后用新生成的Web应用URL嵌入Google Sites即可

内容的提问来源于stack exchange，提问作者J D