Come incorporare la mappa google in modo dinamico come modello in un altro modello

La mappa di google viene visualizzata normalmente come html statico. Ma dobbiamo mostrare i dati dynamicmente su google map, quindi dobbiamo incorporarlo come modello a un altro modello usando javascript. Sembra vuoto. Il codice sorgente delle pagine web mostra che è stata chiamata la funzione ‘initialize ()’ ma la mappa non viene visualizzata

ecco index.html

 
{% include 'origin.html' %}

ecco origin.html

   // 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);   
this is the map

ecco il file 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; } 

Stiamo utilizzando il modello jinja2 nell’applicazione Google App Engine se ciò è importante.

.heatmap bisogno di un’altezza, altrimenti il ​​90% di altezza di #map-canvas sarà calcolato come 0px