从Google Maps JavaScript API v3创建聚合物元素？ （需要帮助）

Question

似乎无法在主页面中加载google maps api。

页面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>

和google api，这可以单独使用。

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页面上有一个“Asynchronous Loading”的例子，但我不能让它适用于聚合物..

有人知道如何实现这个目标吗？

或异步加载不是主要问题吗？

非常感谢帮助！

Answer 1

认为您可能必须将加载谷歌地图的脚本标记加载到页面的实际主体元素中，或者可能只是在聚合物元素定义的范围之外，尽管最后一个解决方案可能会在您从在另一个组成部分内。