背景
我正在尝试将谷歌地图添加到(新的)谷歌网站；地图将具有多个标记，其数据将基于谷歌表随时间变化。
我在哪里
我已经能够使用"；嵌入"；选项，但我需要使用动态标记的谷歌脚本功能。
问题
当使用相同的html脚本并将其与谷歌脚本集成时，文本将显示在谷歌网站上，但不会显示在地图上。
代码
代码.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。提前感谢您的指点。
问题是高度被设置为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>