Создание карты Google с маркером с использованием веб-компонента

Я пытаюсь использовать полимер и веб-компонент для отображения некоторых маркеров на Google-карте.

Вот мой код:

<!DOCTYPE html>
<html>
<head lang="fr">
    <meta charset="UTF-8">
    <title></title>
    <script src="bower_components/platform/platform.js"></script>

    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="bower_components/google-apis/google-apis.html">
    <link rel="import" href="bower_components/google-map/google-map.html">

    <script>
        var airdromes = [
            {
                "name"       : "Anapa-Vityazevo",
                "icao"       : "URKA",
                "country"    : "RU",
                "type"       : "civ",
                "coord"      : {
                    "latitude" : 44.995834,
                    "longitude": 37.334445,
                    "elevation": 147,
                    "heading"  : 41
                },
                "frequencies": {
                    "tower": 121,
                    "tacan": ""
                }
            },
            {
                "name"       : "Batumi",
                "icao"       : "UGSB",
                "country"    : "GE",
                "type"       : "civ",
                "coord"      : {
                    "latitude" : 41.6166667,
                    "longitude": 41.589722223,
                    "elevation": 32,
                    "heading"  : 125
                },
                "frequencies": {
                    "tower": 131,
                    "tacan": "16X (BTM)"
                }
            }
        ];
    </script>

</head>
<body>

<h1>my-map</h1>
<polymer-element name="my-map">
    <template>
        <style>
            google-map {
                display: block;
                width: 400px;
                height: 400px;
            }
        </style>
        <google-map map={{map}} disableDefaultUI fitToMarkers>
            <template repeat="{{airdrome in airdromes}}">
                <google-map-marker map={{map}} latitude="{{airdrome['coord']['latitude']}}"
                                   longitude="{{airdrome['coord']['longitude']}}"></google-map-marker>
            </template>
        </google-map>
    </template>
    <script>
        Polymer('my-map', {
            airdromes: airdromes,
            ready    : function() {
                console.log('this.airdromes :', this.airdromes);
            }
        });
    </script>
</polymer-element>


<my-map></my-map>

</body>
</html>

Кажется, что весь код для Google-карты здесь, есть итерация для маркеров.

Единственная проблема, с которой я сталкиваюсь, заключается в том, что не отображается, не имеет ширины и высоты при вставке в , но все в порядке, если я вызываю его один.

Спасибо за помощь.

РЕДАКТИРОВАТЬ

Хорошо, после еще большего количества исследований и испытаний я наконец достиг этого. 1. импортировать "google-apis.html", потому что кажется, что это помогает загрузить google-map 2. мой стиль google-map был в заголовке документа, я поместил его сразу после первого