在子模板上显示多个 Google Map V3答案

【问题标题】：Displaying more than one Google Map V3 on child templates在子模板上显示多个 Google Map V3
【发布时间】：2017-08-24 06:59:01
【问题描述】：

我在子模板上显示多个谷歌地图时遇到问题。仅显示脚本中的第一个初始化地图，第二个似乎被忽略了。

如果我在一个子模板上放置两张地图，一切正常，但将第二张地图添加到另一个模板会导致第二张地图无法正常工作。

base.html：

{% block body %}
<h1>Base</h1>
{% endblock %}

<script>
function initMap() {
    var uluru = {lat: 12, lng: 23};
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 6,
      center: uluru
    });

    var uluru2 = {lat: 13, lng: 24};
    var map2 = new google.maps.Map(document.getElementById('map2'), {
      zoom: 6,
      center: uluru2
    });

child.html：

{% extends 'base.html' %}

{% block body %}
<div id="map"></div>
{% endblock %}

child2.html：

{% extends 'base.html' %}

{% block body %}
<div id="map2"></div>
{% endblock %}

【问题讨论】：

标签： javascript django google-maps google-maps-api-3 django-templates

【解决方案1】：

不幸的是，我找到的唯一解决方案是通过子模板拆分地图初始化。

child.html：

{% extends 'base.html' %}

{% block body %}
<div id="map"></div>
{% endblock %}

<script>
    function initMap() {
        var uluru = {lat: 12, lng: 23};
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 6,
          center: uluru
    });
</script>

child2.html：

{% extends 'base.html' %}

{% block body %}
<div id="map2"></div>
{% endblock %}

<script>
    function initMap() {
        var uluru2 = {lat: 13, lng: 24};
        var map2 = new google.maps.Map(document.getElementById('map2'), {
          zoom: 6,
          center: uluru2
    });
</script>

【讨论】：