Django模板赢得'；t在块内运行Google Maps javascript_Javascript_Django_Google Maps_Google Maps Api 3_Google Maps Api 2

Django模板赢得'；t在块内运行Google Maps javascript

javascript django google-maps google-maps-api-3

Django模板赢得'；t在块内运行Google Maps javascript,javascript,django,google-maps,google-maps-api-3,google-maps-api-2,Javascript,Django,Google Maps,Google Maps Api 3,Google Maps Api 2,我有一个base.html和一个index.html，它扩展了base.html并填写了{%block content%}{%endblock%}。然而，出于某种原因，我在启动谷歌地图的代码块中使用的javascript并没有创建地图——页面是空白的。无需扩展base.html（即，只需在index.html中显式键入base.html中的所有内容），地图就可以正常工作。守则： base.html <!DOCTYPE html> {% load static %} <html

我有一个base.html和一个index.html，它扩展了base.html并填写了

{%block content%}{%endblock%}

。然而，出于某种原因，我在启动谷歌地图的代码块中使用的javascript并没有创建地图——页面是空白的。无需扩展base.html（即，只需在index.html中显式键入base.html中的所有内容），地图就可以正常工作。守则：

base.html

<!DOCTYPE html>

{% load static %}
<html>
  <head>
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href='{% static "mh_app/style.css" %}' />
  </head>
  <body>
    <header id="header">
      <div class="header-cont">
        <h1>
          Title
        </h1>
        <nav id="nav">
          <ul>
            <li>
              <a href="{% url 'index' %}">Home</a>
            </li>
            <li>
              <a href="{% url 'download' %}">Download</a>
            </li>
            <li>
              <a href="{% url 'about' %}">About</a>
            </li>
          </ul>
        </nav>
      </div>
    </header>
    {% block content %}{% endblock %}
  </body>
</html>

{% block content %}
  <div id='map'></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script type='text/javascript'>
    function initMap() {
      var map = new google.maps.Map(document.getElementById('map'), {
        center: {lat: 38.3499047, lng: -100.0770253},
        zoom: 4
      });
    }
  </script>
  <script src="https://maps.googleapis.com/maps/api/js?key=<my_api_key>&callback=initMap" async defer></script>
{% endblock %}

你有

地图的样式吗
为贴图添加高度和宽度
div，尝试将
更改为类似
的内容。虽然宽度不是强制性的，但至少必须设置高度。没错。但我们不知道应用了什么，因为OP没有发布任何CSS。所以这很有效！通过将高度设置为500px，地图弹出。然而，之前我将高度设置为90%——有没有想过为什么90%的设置没有任何作用？没关系，我想出来了！这是因为我没有将父容器（body和html）设置为100%，除非可以确定父元素的大小，否则不能使用百分比。在您的情况下，如果将主体设置为100%高度，则应该能够在地图容器上设置%高度。
#map {
  height: 90%;
  width: 100%;
}