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!