Google Map API v3 исчезает при включении в шаблон

Я не уверен, связано ли это с шаблоном ветки, который я использую, или другими причинами, может быть JQuery или css. Но я просто следил за тем, как внедрить простую карту Google из этого официального учебника.

Когда я помещаю коды в отдельные html файлы, я получил отображение карты и работал как шарм. Однако, когда я включил его в шаблон моей ветки, карта исчезла. Иногда я получал div с карты очень быстро, а затем сразу исчезал.

Я просто попытался поместить в этот div текст "это карта", чтобы я мог наблюдать и следить за его состоянием (исчезающим или показывающим), но все же я все равно его исчезаю (текст не отображается).

Когда я прокомментировал эту строку

// google.maps.event.addDomListener(window, 'load', initialize);

я получил div (и текст, конечно), показывая, но не загружая карту точно. В принципе, я не сторонний разработчик, поэтому я не могу понять, как это может быть.

Это моя страница.

{% extends 'YastafeedContentBundle::base_regform.html.twig' %}

{% block content1 %}
<div id="page-title">
  <span class="title">{% block page_title %} Kajian Baru {% endblock %}</span>
  <span class="subtitle">{% block page_subtitle %} Agendakan kajian baru {% endblock %}</span>
</div>
<!-- ENDS title -->
<!-- column (left)-->
<div class="one-column">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">

  {% block stylesheets %}
  <style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
  </style>
  <link href="/bundles/nova/css/tokeninput/token-input-facebook.css" rel="stylesheet" />
  {{ form_stylesheet(descForm) }}
  {{ form_stylesheet(jadwalForm) }}
  {{ form_stylesheet(lokasiForm) }}
  {{ form_stylesheet(posterForm) }}
  {% endblock %}

  {% block javascripts %}
  <!-- page-content -->
  <!-- form -->
  <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
  <script type="text/javascript" src="/bundles/nova/js/jquery.form.min.js"></script>
  <script type="text/javascript" src="/bundles/nova/js/form-validation.js"></script>
  <script type="text/javascript" src="/bundles/nova/js/tokeninput/jquery.tokeninput.js"></script>
  {{ form_javascript(descForm) }}
  {{ form_javascript(jadwalForm) }}
  {{ form_javascript(posterForm) }}
  <script>
  var map;
  function initialize() {
    var mapOptions = {
      zoom: 8,
      center: new google.maps.LatLng(-34.397, 150.644),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
      mapOptions);
  }

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

  <form id="kajianForm" class="contact-form" action="{{ path('kajian_create') }}" method="post">
    <p class="header">Deskripsi Umum</p>
    {{ form_widget(descForm) }}
  </form>

    <div class="agm_google_maps" id="map-70b9d4ed8dc157a52a5b8949e219c8e3"></div>
  <form id="lokasiForm" class="contact-form" action="{{ path('lokasi_create') }}" method="post">
    <p class="header">Lokasi</p>
    {{ form_widget(lokasiForm) }}
  </form>
    <div id="map_canvas">this is the map</div>
</div>

<div class="one-column">
  <form id="posterForm" class="contact-form" action="{{ path('gambar_create') }}" method="post" enctype="multipart/form-data">
    <p class="header">Gambar Fitur</p>
    {{ form_widget(descForm) }}
    {{ form_widget(posterForm) }}
    <input type="submit" value="Upload File to Server" />
  </form>
  <div class="progress">
    <div class="bar"></div >
      <div class="percent">0%</div >

  </div>

  <div id="status"></div>

  <form id="jadwalForm" class="contact-form" action="{{ path('jadwal_create') }}"  method="post">
    <p class="header">Jadwal</p>
    {{ form_widget(jadwalForm) }}
    <button type="button" name="add" id="add" tabindex="5" value="ADD">TAMBAH</button>
  </form>

  <div id="list-check" class="lists-check">
    <ul id="scheduleList">  
    </ul>
  </div>

</div>

{% endblock %}

{% block content2 %}
<div class="one-column"> 
  <p id="success" class="success"></p>
  <a href="#" name="back" id="back" tabindex="5" class="link-button" style="float:left;"><span>Back to the list</span></a>
</div>
<div class="one-column">  
  <a href="#" name="create" id="submit" tabindex="5" class="link-button" style="float:right;"><span>Tentukan Lokasi →</span></a>
</div>
{% endblock %}

Я попытался переместить div в разные позиции на странице, но он все еще продолжает исчезать. Спасибо, спасибо.