Модуль OpenLayers 3 Полимер 1.0

Я пытаюсь сделать модуль Polymer для работы с OpenLayers 3 и отображения карт openstreetmaps. Я знаю, что есть отличный модуль для работы с листовками, но мне нужны некоторые специальные функции, такие как ориентация карты .

Во всяком случае, я что-то кодирую, и это работает, за исключением одной вещи, которую я не могу понять: когда страница загружается, отображаются только команды (Zoom + / Zoom -), а не карта (и ничего, например, маркер и т. д.) . Но если я изменю размер своего окна (я имею в виду окно Chrome), появится карта, и все будет работать нормально! Я думал, может быть, что-то в связи с загрузкой DOM...

Код модуля:

<dom-module id="openlayer-map">
  <link rel="stylesheet" href="http://openlayers.org/en/v3.7.0/css/ol.css" type="text/css">
  <script src="http://openlayers.org/en/v3.7.0/build/ol.js" type="text/javascript"></script>


  <style>
    :host {
      display: block;
    }

    #map
    {
      position: absolute;
      height: 100%;
    }

  </style>
  <template>

    <div id="map" class="map"></div>

    <!-- Tests
    <input is="iron-input" bind-value="{{latitude}}" placeholder="latitude">
    <input is="iron-input" bind-value="{{longitude}}" placeholder="longitude">
    -->

  </template>
</dom-module>
<script>
  (function() {
    Polymer({
      is: 'openlayer-map',

      properties:
      {
        currentCenter: Array,
        currentView: ol.View,
        olmap: ol.Map,
        geolocation: ol.Geolocation,
        layer: Object,
        longitude:
        {
          type: Number,
          value:12.889101100000062,
          notify: true,
          observer: '_updateLongitude'

        },
        latitude: 
        {
          type: Number,
          value: 15.7622695,
          notify: true,
          observer: '_updateLatitude'

        },
        geotracking:
        {
          value: false,
          type: Boolean,
          notify: true,
        },

        elemReady: Boolean,


      },


      ready: function()
      {

        console.log('openlayer-map ready');
        this.initialConfig();
        this.elemReady = true;
        this.setCenter(this.latitude,this.longitude);
      },


      initialConfig: function()
      {
            console.log('initial config for the map...');

            this.currentView = new ol.View({
              zoom: 14
            });


            var source = new ol.source.OSM();
            this.layer =  new ol.layer.Tile();
            this.layer.setSource(source); 
            this.olmap = new ol.Map({
              layers: [this.layer],
              target: this.$.map,
              controls: ol.control.defaults({
                attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
                  collapsible: false
                })
              }),
              view: this.currentView
            });

            // Localisation
            this.geolocation = new ol.Geolocation({
              projection: this.currentView.getProjection()
            });

            this.geolocation.setTracking(this.geotracking);
            if(this.geolocation)
            {

              var accuracyFeature = new ol.Feature();

              this.geolocation.on('change:accuracyGeometry', function() {
                accuracyFeature.setGeometry(this.geolocation.getAccuracyGeometry());
              }.bind(this));

              var positionFeature = new ol.Feature();
              positionFeature.setStyle(new ol.style.Style({
                image: new ol.style.Circle({
                  radius: 6,
                  fill: new ol.style.Fill({
                    color: '#3399CC'
                  }),
                  stroke: new ol.style.Stroke({
                    color: '#fff',
                    width: 2
                  })
                })
              }));
              this.geolocation.on('change:position', function() {
                var coordinates = this.geolocation.getPosition();
                positionFeature.setGeometry(coordinates ?
                new ol.geom.Point(coordinates) : null);
              }.bind(this));

              var featuresOverlay = new ol.layer.Vector({
                map: this.olmap,
                source: new ol.source.Vector({
                  features: [accuracyFeature, positionFeature]
                })
              });
            }
      },


      _updateLatitude: function(newValue, oldValue)
      {
            if(this.elemReady)
            {
              console.log('update latitude from '+oldValue+' to '+newValue);
              this.setCenter(newValue, this.longitude);
            }
            else
            {
              console.log('_updateLatitude: waiting element to be ready');
            }
      },

       _updateLongitude: function(newValue, oldValue)
      {
          if(this.elemReady)
          {
            console.log('update longitude from '+oldValue+' to '+newValue);
            this.setCenter(this.latitude, newValue);
          }
          else
          {
            console.log('_updateLatitude: waiting element to be ready');
          }
      },

      setCenter: function(latitude, longitude)
      {

        var center = [longitude, latitude];
        this.currentCenter = ol.proj.fromLonLat(center);
        console.log('update center of the map with latitude = '+latitude+' and longitude = '+longitude);
        this.currentView.centerOn(this.currentCenter,[400,400], [0,0]);

      },

    });
  })();
</script>

И вызов в Polymer:

<openlayer-map latitude="48.853" longitude="2.35" geotracking></openlayer-map>

Любая подсказка?