在 Blogger 中使用时未显示某些 Google 地图功能答案

【问题标题】：Some Google Map features not appearing when used in Blogger在 Blogger 中使用时未显示某些 Google 地图功能
【发布时间】：2012-11-27 12:47:36
【问题描述】：

我正在尝试在博客上添加 Google 地图（使用 Blogger）。该脚本使用 Blogger API 检索博客中的每个帖子并获取其位置 (Lat/Lng)。它创建了一个地图，显示连接所有这些地方的折线。它还在最后访问的地方显示一个标记，并将地图居中放置在那里（这里应该是布宜诺斯艾利斯）。

我为此编写了一小段 html/javascript 代码，它在浏览器中运行良好（下图第一张）。但是，当我尝试在博客页面/帖子中包含 html 代码时，地图的某些功能不再存在（下图第二张）。

这很奇怪，因为正确显示了路径（折线）但没有显示标记。此外，不考虑地图的属性（即：中心位置、卫星视图）。但是，当我四处移动地图时，正确的地图有时会出现几分之一秒！

这是我正在测试的博客的链接： http://testblogapinico.blogspot.ch/p/map.html

以及生成第一张地图的实际代码（我只是在博文中复制/粘贴此代码以获得第二张地图）：

<!DOCTYPE html>
<html>
<body>

<div id="content"></div>
<div id="googleMap" style="width:600px;height:900px;"></div>

<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>
var Lat = new Array();
var Lng = new Array();
var Place = new Array();

// Get latitude/longitude from Blogger
function handleResponse(response) {
    for(i=0; i< response.items.length; i++){
        Lat.push(response.items[i].location.lat);
        Lng.push(response.items[i].location.lng);
        Place.push(response.items[i].location.name);
    }
}

// Create the map based on locations retrieved from Blogger
function initialize(){
    // Get all latitude and longitude
    var pos = new Array();

    // Get the path
    for(var i=0; i<Lat.length; i++){
        pos[i]=new google.maps.LatLng(Lat[i],Lng[i]);
    }

    // Get the last position
    var lastpos=new google.maps.LatLng(Lat[0],Lng[0]);

    // Create the map
    var mapProp = {
        center:lastpos,
        zoom:4,
        mapTypeId:google.maps.MapTypeId.SATELLITE
        };

    var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

    // Create the marker of last position
    var marker=new google.maps.Marker({
            position:lastpos,
    });

    marker.setMap(map);

    // Create the path
    var flightPath = new google.maps.Polyline({
        path:pos,
        strokeColor:"#EE0000",
        strokeOpacity:0.6,
        strokeWeight:7
    });

    flightPath.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>


<script
src="https://www.googleapis.com/blogger/v3/blogs/884353949349844556/posts?callback=handleResponse&key=AIzaSyAJO5J-pRCaGOIeRLIJfvAPwxpMLKvwebU">
</script>

</body>
</html>

有人知道问题出在哪里吗？

提前感谢您的帮助！！！

干杯，

尼古拉斯

【问题讨论】：

标签： javascript html google-maps-api-3 blogger

【解决方案1】：

我查看了您的页面，看起来您有两张地图，一张在另一张之上。

查看源代码，您确实有两个用于初始化地图的 javascript。有趣的是，它们都被命名为“初始化”——不知道为什么你不只是得到一个错误。

我猜如果你删除多余的 javascript，它会正常工作。

【讨论】：

好极了！我最初试图将这段代码放在旁边的一个小工具中，这就是为什么有两次这个功能！非常感谢！！