Не отображается карта на сайте

Столкнулся с такой проблемой никак не получается вывести карту на сайт, когда создаю отдельный документ все работает отлично, а когда определяю карту в коде оно просто не выводиться. Прошу помочь разобраться что собственно делаю не так. Код страницы где должна отображаться карта:

{% extends "base.html" %}
{% import "bootstrap/wtf.html" as wtf %}
{% block title %}Ping-Checker{% endblock %}
{% block head %}
{{ super() }}
<link rel="stylesheet" href="static/style.css">
<link rel="shortcut icon" href="static/favicon.ico" type="image/x-icon">
{% endblock %}
{% block page_content  %}

<div class="page-header">
  <h1>Hello</h1>
  <p>The local date and time is {{ moment(current_time).format('LLL') }}.</p>
  <p>Your IP is {{ real_ip }} </p>
</div>
{{ wtf.quick_form(form) }}
{% endblock %}

{% block map %}
<div class="page-header">
<script src="static/OpenLayers.js"></script>
  <div id="basicMap">
    <script src="static/map.js"></script>
  </div>

</div>
{% endblock %}

функция вызова карты

function init() {
    map = new OpenLayers.Map("basicMap");
    var mapnik         = new OpenLayers.Layer.OSM();
    var fromProjection = new OpenLayers.Projection("EPSG:4326");   // Transform from WGS 1984
    var toProjection   = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
    var position       = new OpenLayers.LonLat(-50.0059731,40.7143528).transform( fromProjection, toProjection);
    var zoom           = 10; 

    map.addLayer(mapnik);
    map.setCenter(position, zoom );
    }
    init();

Код стиля.

#basicMap {
          width: 100%;
          height: 100%;
          margin: 0;
      }