Javascript 如何将GoogleMap作为模板动态嵌入到另一个模板中_Javascript_Html_Css_Google Maps_Templates

Javascript 如何将GoogleMap作为模板动态嵌入到另一个模板中

javascript html css google-maps templates

Javascript 如何将GoogleMap作为模板动态嵌入到另一个模板中,javascript,html,css,google-maps,templates,Javascript,Html,Css,Google Maps,Templates,谷歌地图通常显示为静态html。但我们需要在GoogleMap上动态显示数据，所以我们需要使用javascript将其作为模板嵌入到另一个模板中。它似乎是空白的。网页的源代码显示已调用“初始化”函数，但地图未显示这里是index.html <body> <div class = "heatmap"> {% include 'origin.html' %} </div> </body> 如果这很重要，我们将在Google App En

谷歌地图通常显示为静态html。但我们需要在GoogleMap上动态显示数据，所以我们需要使用javascript将其作为模板嵌入到另一个模板中。它似乎是空白的。网页的源代码显示已调用“初始化”函数，但地图未显示

这里是index.html

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

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

。热图需要一个高度，否则地图画布的90%高度将计算为0px

，在css文件中添加属性后，它将工作。被这个问题困扰了很长时间。非常感谢你！

<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>

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;
}