Displaying more than one Google Map V3 on child templates

Question

I have a problem displaying multiple google maps on child templates. Only first initialized map in the script is displaying, second seems to be ignored.

If I place two maps on one child template everything works fine, but adding second map to an additional template is making second map not working.

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

Answer 1

Unfortunately only solution I found is to split map initialization through child templates.

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>