当我尝试使用 google map api 显示地图时页面变为空白答案

【问题标题】：Page turns blank when I try to show map using google's map api当我尝试使用 google map api 显示地图时页面变为空白
【发布时间】：2013-12-18 03:48:46
【问题描述】：

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

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

mainpage.html:

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

当我加载主页时，地图根本不显示。我查看了页面源代码，它正确显示了<div id="map-canvas"/>，所以地图正在加载，但没有显示。然后我添加了一些文字

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

derp 也出现在源代码中，但一切仍然是空白的。怎么了？

【问题讨论】：

标签： javascript python html google-maps google-app-engine

【解决方案1】：

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

【讨论】：

【解决方案2】：

div 不是所谓的empty element（例如li, option , img），它需要一个结束标签（即使它没有任何内容）：

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

这就是您看不到“derp”的原因，对于地图的问题，请参阅 bruno desthuilliers 的答案。

【讨论】：