javascript - google.maps 在 Django 中未定义

Question

我有下一个代码：

{% 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 %}

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

所以我评论了这一行：

然后我有错误：无法读取行中未定义的属性'Map' var map = new google.maps.Map(...)

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

标签： javascriptjquerydjangogoogle-maps

Answer 1

您有多个script元素加载地图脚本，因此出现错误。将您的代码更新为：

{% 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 %}