I created polymer-element and add Google Map in it. It works correctly if i write code of polymer-element direct into main file where i want to use it but if i keep its code in separate file and use it by importing then it gives following error in console:
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.
here is code of my-map.html file:
<link rel="import" href="bower_components/polymer/polymer.html">
<script src="http://ift.tt/1lrRXYd"></script>
<polymer-element name="my-map">
<template>
<style type="text/css">
:host{
display: block;
}
#mapCanvas {
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
<div id="mapCanvas"></div>
</template>
<script type="text/javascript">
Polymer({
map:null,
ready:function(){
this.map = new google.maps.Map(this.$.mapCanvas, {
center: new google.maps.LatLng(41, -91),
disableDefaultUI: true,
zoom: 5
});
}
});
</script>
</polymer-element>
and this is code of main file index.html:
<!DOCTYPE html>
<html>
<head>
<title>My Map</title>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<link rel="import" href="my-map.html">
</head>
<body>
<my-map style="height:500px,width:500px;"></my-map>
</body>
</html>
where is problem? if i write code of my-map.html file in index.html file then it work perfect.
Aucun commentaire:
Enregistrer un commentaire