Django模板不會在塊內運行Google Maps JavaScript

我有一個base.html和一個index.html，它擴展了base.html並填充了一個{% block content %}{% endblock %}。但是，由於某種原因，我在塊中處理啓動Google Map的JavaScript不會創建地圖 - 頁面是空白的。在不擴展base.html的情況下（即只需在base.html中直接輸入index.html中的所有內容），地圖工作正常。代碼：Django模板不會在塊內運行Google Maps JavaScript

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>

的index.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 %}

我試着堅持內initMap()一些console.log語句，它們運行得很好，所以我不知道爲什麼地圖沒有出現。

編輯

的style.css

#map { 
    height: 90%; 
    width: 100%; 
}

來源

2017-02-16 HLH

你有沒有爲map格樣式？

添加的高度和寬度爲map格，請嘗試更改<div id="map"></div>喜歡的東西<div id="map" style="width: 500px; height: 500px;"></div>

來源

2017-02-16 21:17:37

雖然寬度不是強制性的，你必須設置一個高度，至少。確實如此。但是我們不知道應用了什麼，因爲OP沒有發佈任何CSS。 – MrUpsidown

所以這工作！通過將高度設置爲500px，彈出地圖。但是，之前我已將身高設置爲90％ - 關於爲什麼90％設置沒有做任何事情的任何想法？ – HLH

沒關係，想通了！這是因爲我沒有父容器 - body和html - 設置爲100％ – HLH

Django模板不會在塊內運行Google Maps JavaScript

回答

相關問題