Создание полимерного элемента из Google Maps JavaScript API v3? (Нужна помощь)

Не удается загрузить API карт Google на главной странице.

страница-content.html

<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="gmaps-simplified.html" async>

<polymer-element name="page-content">

    <style>
        :host {
            height: 100%;
            width: 100%;
        }
        .page-content {
            width: 100%;
            height: 100%;
            background-color: black;
        }
    </style>
    <gmaps-simplified ></gmaps-simplified>
<script>
    Polymer({

    });
</script>

</polymer-element>
<page-content></page-content>

и API Google, это работает само по себе.

gmap-simplified.html

<link rel="import" href="../components/polymer/polymer.html">

<polymer-element name="gmaps-simplified">
<template>

    <div id="mapCanvas" style="background-color:#73da9c;width: 100%;height: 100%"></div>

</template>
<script>
    Polymer('gmaps-simplified', {

        ready: function () {

            var stylers = [
                {
                    featureType: "water",
                    stylers: [
                        {
                            color: "#73da9c"
                }
]
}, {
                    featureType: "administrative",
                    stylers: [
                        {
                            visibility: "off"
                }
]
}, {
                    featureType: "landscape",
                    elementType: "labels",
                    stylers: [
                        {
                            color: "#808080"
                },
                        {
                            visibility: "off"
                }
]
}, {
                    featureType: "poi",
                    stylers: [
                        {
                            visibility: "off"
                }
]
}, {
                    featureType: "road",
                    stylers: [
                        {
                            visibility: "off"
                }
]
}, {
                    featureType: "transit",
                    stylers: [
                        {
                            visibility: "off"
                }
]
}, {
                    elementType: "labels",
                    stylers: [
                        {
                            visibility: "off"
                }
]
}, {
                    featureType: "landscape",
                    elementType: "geometry.stroke",
                    stylers: [
                        {
                            visibility: "off"
                }
]
}, {
                    featureType: "landscape",
                    elementType: "geometry",
                    stylers: [
                        {
                            color: "#cff2dd"
                }
]
}
];
            var minZoomLevel = 3;

            var map = new google.maps.Map(this.$.mapCanvas, {
                zoom: minZoomLevel,
                center: new google.maps.LatLng(35, 6.852363),
                disableDefaultUI: true,
                mapTypeControlOptions: {
                    mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'custommap']
                }
            });



            var styledMapOptions = {
                name: 'Nick Style'
            };

            var customStyledMap = new google.maps.StyledMapType(
                stylers, styledMapOptions);

            map.mapTypes.set('custommap', customStyledMap);
            map.setMapTypeId('custommap');

            // Limit the zoom level
            google.maps.event.addListener(map, 'zoom_changed', function () {
                if (map.getZoom() < minZoomLevel) map.setZoom(minZoomLevel);
            });
        }
    });
  </script>
 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key={KEY}">
</script>
</polymer-element>
<gmaps-simplified></gmaps-simplified>

У меня есть API для работы в качестве пользовательского элемента. Но когда я открываю page-content.html, он будет отображать только цвет фона gmaps-simplified.html, а консоль выдает следующие сообщения об ошибках:

ConsoleAgent: Failed to execute 'write' on 'Document': It isn't possible to      
write into a document from an asynchronously-loaded external script unless  
it is explicitly opened. (url: https://maps.googleapis.com/maps/api/js?
key={{KEY}}) in getScript:14

а также:

 ConsoleAgent: Uncaught TypeError: undefined is not a function (url: 
 http://127.0.0.1:56264/elements/gmaps-simplified.html) in Polymer.ready:29

На странице "асинхронная загрузка есть пример api, но я не могу заставить это работать для полимера..

Кто-нибудь знает, как этого добиться?

Или асинхронная загрузка не главная проблема?

Помощь приветствуется!


person Somaar    schedule 23.01.2015    source источник
comment
Возможно, вы захотите удалить ссылку на api_key из вашего примера.   -  person pdelanauze    schedule 23.01.2015
comment
По какой причине вы не используете github.com/GoogleWebComponents/google-map?   -  person pdelanauze    schedule 23.01.2015
comment
Удалил ключ, спасибо что заметили..! Я полагаю, что мог бы попробовать этот компонент, но он казался приятным и легким. Кроме того, сайт API хорошо документирован, позже я хочу добавить больше функций.   -  person Somaar    schedule 24.01.2015
comment
Кстати, ваш ключ все еще находится во второй трассировке стека;) Возможно, вы захотите сгенерировать его повторно.   -  person pdelanauze    schedule 26.01.2015


Ответы (1)


Подумайте, что вам, возможно, придется перенести тег сценария, который загружает карты Google, в фактический элемент тела страницы или, возможно, просто за пределы определения полимерного элемента, хотя это последнее решение может сломаться, когда ваш компонент загружается из другого компонента. .

person pdelanauze    schedule 23.01.2015
comment
Большое спасибо! Ваш комментарий сделал свое дело. Переместил скрипт на страницу-контент(вне полимерного тега) и удалил его из gmaps-simplified и заработало! - person Somaar; 24.01.2015