背景介紹
我試圖在一個（新的）谷歌網站上添加一個谷歌地圖；該地圖將有多個標記，其資料將根據一個谷歌作業表隨時間變化。我在哪里
我已經能夠使用 "嵌入 "選項在網站上直接添加一個帶有靜態資料的地圖，但是我需要使用Google Scripts功能來制作動態標記。問題在于
。當使用相同的HTML腳本并與Google Scripts集成時，文本將顯示在Google網站上，但不是地圖上。
代碼
Code.gs
function doGet（） {
return HtmlService
.createTemplateFromFile('index')
.評估()。
}
Index.html
<!DOCTYPE html>
<html>
<head>
<title>添加地圖</title>
<style type="text/css"/span>>
#map {
height: 100%;
width: 100%。
}
</style>>
<script>
//初始化并添加地圖。
function initMap（） {
//Uluru的位置。
const uluru = { lat: -25.344, lng: 131.036 };
//地圖，以烏魯魯為中心。
const map = new google.maps. Map(document.getElementById("map"/span>), {
zoom: 4,
center: uluru,
});
</script>>
</head>
<body>
<h3>我的谷歌地圖演示</h3>
<!--地圖的div元素-->/span>
<div id="map"/span>> </div>>
<!-- 異步腳本立即執行，必須在回呼中使用的任何DOM元素之后。-->
<script async >。
src="https://maps.googleapis.com/maps/api/js?key=<API_KEY>&callback=initMap"
>
</script>
</body>
</html>
代碼中填寫了API_KEY。提前感謝您的指點。
uj5u.com熱心網友回復：
問題是高度被設定為0像素；地圖繼承自父塊元素，而父塊元素沒有指定一個尺寸，導致高度被假定為0像素。這可以通過指定一個像素的高度來解決：
<style type="text/css">
#map {
height: 100%;
width: 100%。
}
</style>>
或者指定高度應該是HTML主體的100%：
<style type="text/css"/span>>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
</style>
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/311669.html
標籤：
上一篇：無法顯示DrawingManager（"你在URL中是否包含proplibraries={[drawing']}？未定義"）。