Google api を使用して地図を表示しようとしていますが、表示されません。
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAH35jXY2Yb5eApUzvZXuObiwFOpTC9xu0&sensor=true"> </script>
キー
{% if page == "Map" %}
<body bgcolor="#000000" onload="initialize()" >
<div id="floater" style="color:#33ff33; width:100%;"> Cool Title Here </div>
<div id="map_canvas" style="width: 60%; height:80%"></div>
</body>
{% endif %}
ジンジャ
<script>
var map;
var markersArray = [];
var newMark;
function initialize() {
var a = new google.maps.LatLng(40.731649,-73.923269);
var mapOptions = {
zoom: 12 ,
center: a,
mapTypeId: google.maps.MapTypeId.HYBRID
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
{% for x in MessageList %}
newMark = new google.maps.LatLng({{x[1]}},{{x[0]}});
addMarker(newMark, "{{x[2]}}") ;
{% endfor %}
infowindow = new google.maps.InfoWindow({ content: "holding..." });
for (var i = 0; i < markersArray.length; i++) {
var marker = markersArray[i];
google.maps.event.addListener(marker, 'click', function () {
infowindow.setContent(this.user);
infowindow.open(map, this);
map.setCenter(this.getPosition());
});
}
}
</script>
Javascript
私は以前、Jinja が体を囲むことなくこのコードを使用しましたが、それはうまくいきました。これが私のテストページでの外観です（ここにはマーカーは表示されていませんが、機能していました）
現在作業中のページは次のとおりです。
コンソールにエラーは表示されません。現在、「フローター」は表示されますが、マップは表示されません。