Javascript 当我尝试使用google'；显示地图时，页面变为空白；s地图api_Javascript_Python_Html_Google Maps_Google App Engine

Javascript 当我尝试使用google'；显示地图时，页面变为空白；s地图api

javascript python html google-maps google-app-engine

Javascript 当我尝试使用google'；显示地图时，页面变为空白；s地图api,javascript,python,html,google-maps,google-app-engine,Javascript,Python,Html,Google Maps,Google App Engine,当用户登录时，我想显示地图基本html： <!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="/static/main.css" /> <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=mykey&sensor=true"&g

当用户登录时，我想显示地图

基本html：

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="/static/main.css" />

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=mykey&sensor=true">
</script>

<script type="text/javascript">
  function initialize() {
    var mapOptions = {
      center: new google.maps.LatLng(-20, 110),
      zoom: 8
    };
    var map = new google.maps.Map(document.getElementById("map-canvas"),
        mapOptions);
  }
  google.maps.event.addDomListener(window, 'load', initialize);
</script>

<title>myapp</title>
</head>

<body>
{% block content %}
{% endblock %}
</body>

</html>


函数初始化（）{
变量映射选项={
中心：新的google.maps.LatLng（-20110），
缩放：8
};
var map=new google.maps.map（document.getElementById（“地图画布”），
地图选项）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
myapp
{%block content%}
{%endblock%}

mainpage.html：

{% extends "base.html" %}
{% block content %}
<div id="map-canvas"/>
{% endblock %}

{%extends“base.html”%}
{%block content%}
{%endblock%}

当我加载主页时，地图根本不显示。我查看了页面源代码，它正确地显示了

，因此地图正在加载，但没有显示。然后我添加了一些文本

{% extends "base.html" %}
{% block content %}
<div id="map-canvas"/>
<div>derp<div>
{% endblock %}

{%extends“base.html”%}
{%block content%}
德普
{%endblock%}

derp也出现在源代码中，但所有内容仍然为空。怎么了？

您的地图画布div需要调整大小，如文档中所述

div

不是所谓的（例如

li，option，img

），它需要一个结束标记（当它没有任何内容时也是如此）：

这就是为什么你看不到“derp”的原因，关于地图的问题，请看bruno desthuilliers的答案

<div id="map-canvas"></div>