Membuat elemen polimer dari Google Maps JavaScript API v3? (Bantuan diperlukan)

Sepertinya api Google Maps tidak dapat dimuat di halaman utama.

halaman-konten.html

<link rel="import" href="/id../components/polymer/polymer.html">
<link rel="import" href="/idgmaps-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>

dan google api, ini berfungsi dengan sendirinya.

gmap-sederhana.html

<link rel="import" href="/id../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>

Saya memiliki api yang berfungsi sebagai elemen khusus. Namun ketika saya membuka halaman-content.html hanya akan menampilkan warna latar belakang gmaps-simplement.html Dan konsol memberikan pesan kesalahan berikut:

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

Dan:

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

Ada contoh untuk 'Pemuatan Asinkron' di halaman api tapi saya tidak bisa membuatnya berfungsi untuk polimer..

Apakah ada yang punya ide tentang cara mencapai ini?

Atau apakah pemuatan asinkron bukan masalah utama?

Bantuan sangat dihargai!


person Somaar    schedule 23.01.2015    source sumber
comment
Mungkin ingin mengambil referensi api_key dari contoh Anda ..   -  person pdelanauze    schedule 23.01.2015
comment
Adakah alasan mengapa Anda tidak menggunakan github.com/GoogleWebComponents/google-map ?   -  person pdelanauze    schedule 23.01.2015
comment
Menghapus kuncinya, terima kasih telah mencatat..! Saya kira saya dapat mencoba komponennya tetapi rasanya enak dan ringan seperti ini. Ditambah lagi situs apinya terdokumentasi dengan baik, saya ingin menambahkan lebih banyak fitur nanti.   -  person Somaar    schedule 24.01.2015
comment
Kunci Anda masih dalam jejak tumpukan kedua;) Mungkin ingin membuat ulang yang itu   -  person pdelanauze    schedule 26.01.2015


Jawaban (1)


Sepertinya Anda mungkin harus membawa tag skrip yang memuat peta Google ke dalam elemen isi laman yang sebenarnya, atau berpotensi berada di luar cakupan definisi elemen polimer, meskipun solusi terakhir ini mungkin rusak ketika komponen Anda dimuat dari dalam komponen lain .

person pdelanauze    schedule 23.01.2015
comment
Terima kasih banyak! Komentar Anda berhasil. Memindahkan skrip ke konten halaman (di luar tag polimer) dan menghapusnya dari gmaps-disederhanakan dan berhasil! - person Somaar; 24.01.2015