我有一个带有嵌入式Google地图的Blogger页面,效果很好。当我尝试使用Google的Javascript API在地图顶部添加KML图层时,除了导航控件之外,地图变得完全黑了。如果我将kml图层设置为null,则会再次显示基础地图。
我在本地环境中测试了完全相同的代码并且工作正常。所以问题在于将代码嵌入Blogger页面。
下面是我的html和js。有谁知道问题可能是什么?
请注意,我在下面使用的示例kml文件只是一个没有任何位置标记的骨架,但是我已经尝试过与其他kml一起使用并得到相同的结果。
<html>
<head>
<style type="text/css">
#map-canvas {
height: 480px;
width: 500px;
margin: 0px;
padding: 0px
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3" type="text/javascript"/>
<script type="text/javascript">
function initializeMap() {
var centre = new google.maps.LatLng(35.5906421,37.6945915);
var mapOptions = {
zoom: 3,
center: centre,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var layer = new google.maps.KmlLayer({
url: 'http://trackmytour.com/Dpxc9.kml',
preserveViewport: true
});
layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initializeMap);
</script>
</head>
<body>
<p>
Here is where I'll be tracking my progress.<br>
<br>
<br>
</p>
<div id="map-canvas"/>
</body>
</html>