如何将Google地图动态嵌入到另一个模板中作为模板 [英] How to embed google map dynamically as template in another template
问题描述
Google地图通常显示为静态HTML。
但是我们需要在google地图上动态显示数据，所以我们需要使用javascript将其作为模板嵌入到另一个模板。
它似乎是空白。网页的源代码显示已调用'initialize（）'函数但不显示地图
The google map displays normally as static html. But we need to show datas dynamically on google map so we need to embed it as a template to another template using javascript. It appears to be blank. The source code of webpages shows that the 'initialize()' function has been called but the map doesn't appear
这里是index.html
here is index.html
<body>
<div class = "heatmap">
{% include 'origin.html' %}
</div>
</body>
这里是origin.html
here is 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模板。 p>
We are using jinja2 template in Google App Engine application if this matters.
推荐答案
.heatmap 需要一个高度，否则90％ code>＃map-canvas 将计算为0px
.heatmap needs a height, otherwise the 90%-height of #map-canvas will be calculated as 0px
这篇关于如何将Google地图动态嵌入到另一个模板中作为模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
