Javascript google.maps在Django中未定义

我有下一个代码：

{% extends "block.html" %}

{% load media_tags staticfiles %}

{% block blocktitle %}{% endblock %}

{% block blockbody %}

{% addmedia "css" %}
  <link href="{% static "merengue/css/map/map.css" %}" rel="stylesheet" type="text/css" />
{% endaddmedia %}

<script src="//maps.googleapis.com/maps/api/js" type="text/javascript"></script>
<style type="text/css"> html, body, #map { height: 100%; margin: 0; }</style>

<script type="text/javascript">
    var blocked_maps;
    var setup_blocked_maps;
    var map;

    var script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3&amp;key=AIzaSyBwdVf-Ezph3llEXy-cK0HnTLLfGEx3p-Q&libraries=places';
    //script.defer = true;

    if (! blocked_maps) {
        blocked_maps={}
    }
    blocked_maps["#mapblock_{{ reg_block.id }}"]={
                    use_cluster: false,
                    show_directions: false,
                    {% if render_ui %}
                    use_small_controls: true
                    {% else %}
                    no_ui: true
                    {% endif %}
                };

function initialize() {
  var map = new google.maps.Map(
    document.getElementById('map'), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var marker = new google.maps.Marker({
        position: new google.maps.LatLng(37.4419, -122.1419),
        map: map
  });

}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="mapblock_{{ reg_block.id }}" style="width: {{ width }}px; height: {{ height }}px;">
  <div class="mapParameters hide">
    <span class="zoom">{{ zoom }}</span>
    <span class="longitude">{{ longitude|safe }}</span>
    <span class="latitude">{{ latitude|safe }}</span>
    <span class="markersShownInitially">1</span>
  </div>
  <div class="mapPoint hide">
    <span class="longitude">{{ longitude|safe }}</span>
    <span class="latitude">{{ latitude|safe }}</span>
    <span class="iconImage">{% static "merengue/img/map/default_map_icon.png" %}</span>
  </div>
</div>

{% endblock %}

{%extends“block.html”%}
{%load media_标记静态文件%}
{%block blocktitle%}{%endblock%}
{%block blockbody%}
{%addmedia“css”%}
{%endaddmedia%}
html，body，#map{高度：100%；边距：0；}
var-u映射；
var设置\u阻止\u映射；
var映射；
var script=document.createElement（'script'）；
script.src=https://maps.googleapis.com/maps/api/js?v=3&key=AIzaSyBwdVf-Ezph3llEXy-cK0HnTLLfGEx3p-Q&libraries=places'；
//script.defer=true；
如果（！阻止的映射）{
阻塞的_映射={}
}
阻塞的_映射[“#映射块{{{reg_block.id}}”]={
使用_cluster:false，
显示方向：错误，
{%if render_ui%}
使用小控件：真
{%else%}
没有,对
{%endif%}
};
函数初始化（）{
var map=new google.maps.map(
document.getElementById（'map'）{
中心：新google.maps.LatLng（37.4419，-122.1419），
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var marker=new google.maps.marker({
位置：新google.maps.LatLng（37.4419，-122.1419），
地图：地图
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
{{zoom}}
{{经度|安全}
{{纬度|安全}}
1.
{{经度|安全}
{{纬度|安全}}
{%static“merengue/img/map/default\u map\u icon.png”%}
{%endblock%}

如果我运行此代码，请给出错误： 您已多次在此页面上包含Google Maps JavaScript API。这可能会导致意外错误

所以我评论这句话：

然后我有一个错误：无法读取var Map=new google.maps.Map（…）行中未定义的属性“Map”

---

问题是google.maps没有定义，我不知道如何解决这个问题。

您有多个

脚本
元素加载maps脚本，因此出现了错误。将代码更新为：

{% extends "block.html" %}

{% load media_tags staticfiles %}

{% block blocktitle %}{% endblock %}

{% block blockbody %}

{% addmedia "css" %}
  <link href="{% static "merengue/css/map/map.css" %}" rel="stylesheet" type="text/css" />
{% endaddmedia %}

<script src="https://maps.googleapis.com/maps/api/js?v=3&amp;key=AIzaSyBwdVf-Ezph3llEXy-cK0HnTLLfGEx3p-Q&libraries=places" type="text/javascript"></script>
<style type="text/css"> html, body, #map { height: 100%; margin: 0; }</style>

<script type="text/javascript">
    var blocked_maps;
    var setup_blocked_maps;
    var map;

    if (! blocked_maps) {
        blocked_maps={}
    }
    blocked_maps["#mapblock_{{ reg_block.id }}"]={
                    use_cluster: false,
                    show_directions: false,
                    {% if render_ui %}
                    use_small_controls: true
                    {% else %}
                    no_ui: true
                    {% endif %}
                };

function initialize() {
  var map = new google.maps.Map(
    document.getElementById('map'), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
  });

  var marker = new google.maps.Marker({
        position: new google.maps.LatLng(37.4419, -122.1419),
        map: map
  });

}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="mapblock_{{ reg_block.id }}" style="width: {{ width }}px; height: {{ height }}px;">
  <div class="mapParameters hide">
    <span class="zoom">{{ zoom }}</span>
    <span class="longitude">{{ longitude|safe }}</span>
    <span class="latitude">{{ latitude|safe }}</span>
    <span class="markersShownInitially">1</span>
  </div>
  <div class="mapPoint hide">
    <span class="longitude">{{ longitude|safe }}</span>
    <span class="latitude">{{ latitude|safe }}</span>
    <span class="iconImage">{% static "merengue/img/map/default_map_icon.png" %}</span>
  </div>
</div>

{% endblock %}

{%extends“block.html”%}
{%load media_标记静态文件%}
{%block blocktitle%}{%endblock%}
{%block blockbody%}
{%addmedia“css”%}
{%endaddmedia%}
html，body，#map{高度：100%；边距：0；}
var-u映射；
var设置\u阻止\u映射；
var映射；
如果（！阻止的映射）{
阻塞的_映射={}
}
阻塞的_映射[“#映射块{{{reg_block.id}}”]={
使用_cluster:false，
显示方向：错误，
{%if render_ui%}
使用小控件：真
{%else%}
没有,对
{%endif%}
};
函数初始化（）{
var map=new google.maps.map(
document.getElementById（'map'）{
中心：新google.maps.LatLng（37.4419，-122.1419），
缩放：13，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var marker=new google.maps.marker({
位置：新google.maps.LatLng（37.4419，-122.1419），
地图：地图
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
{{zoom}}
{{经度|安全}
{{纬度|安全}}
1.
{{经度|安全}
{{纬度|安全}}
{%static“merengue/img/map/default\u map\u icon.png”%}
{%endblock%}
顺便说一句，公开包含API密钥从来都不是一个好主意，请确保将其删除！