如何将谷歌地图作为模板动态嵌入到另一个模板中答案

【问题标题】：How to embed google map dynamically as template in another template如何将谷歌地图作为模板动态嵌入到另一个模板中
【发布时间】：2014-04-13 04:18:20
【问题描述】：

谷歌地图通常显示为静态 html。但是我们需要在谷歌地图上动态显示数据，所以我们需要使用 javascript 将其作为模板嵌入到另一个模板中。它似乎是空白的。网页源代码显示调用了'initialize()'函数但地图没有出现

这里是 index.html

<body>
<div class = "heatmap">
    {% include 'origin.html' %}
</div>
</body>

这里是 origin.html

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization"></script>
<script>
// Adding 500 Data Points
var map, pointarray, heatmap;

var taxiData = [
    new google.maps.LatLng(37.782551, -122.445368),
    new google.maps.LatLng(37.782745, -122.444586)
 ];

function initialize() {
      alert('map appears!')
      var mapOptions = {
      zoom: 13,
      center: new google.maps.LatLng(37.774546, -122.433523),
      mapTypeId: google.maps.MapTypeId.SATELLITE
 };

map = new google.maps.Map(document.getElementById('map-canvas'),
  mapOptions);

var pointArray = new google.maps.MVCArray(taxiData);

heatmap = new google.maps.visualization.HeatmapLayer({
data: pointArray});

 heatmap.setMap(map);
}


google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>

<div id="map-canvas">this is the map</div>

这是css文件：

html{
height: 90%;
    margin: 0px;
    padding: 0px;
}

body {
height: 90%; 
margin: 0px; 
padding: 0px;
font-family: Verdana, Helvetica, sans-serif;
background-color: #DDDDDD;
}

#map-canvas {
height: 90%;
margin: 0px;
padding: 0px;
}

如果这很重要，我们将在 Google App Engine 应用程序中使用 jinja2 模板。

【问题讨论】：

标签： javascript html css google-maps templates

【解决方案1】：

.heatmap需要一个高度，否则#map-canvas的90%-高度将被计算为0px

【讨论】：

在css文件中添加属性后生效。被这个问题困扰了很久。非常感谢！