Javascript 一页显示两张谷歌地图

正在尝试在一页上显示两个地图。我已经成功地将两个都显示出来，但只能删除第二个贴图pin…我认为第二个贴图正在覆盖第一个pin，但需要帮助

<script>
    var myCenter = new google.maps.LatLng(51.059955, -114.211807);

    function initialize() {
        var mapProp = {
            center: myCenter,
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
        var marker = new google.maps.Marker({
            position: myCenter,
            animation: google.maps.Animation.DROP,
            icon: 'http://www.fergusandbix.com/images/FB-pin.png'
        });
        marker.setMap(map);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    var myCenter2 = new google.maps.LatLng(50.9156772, -113.9640719);

    function initialize() {
        var mapProp2 = {
            center: myCenter2,
            zoom: 14,
            mapTypeId: google.maps.MapTypeId.ROADMAP2
        };
        var map = new google.maps.Map(document.getElementById("googleMap2"), mapProp2);
        var marker = new google.maps.Marker({
            position: myCenter2,
            animation: google.maps.Animation.DROP,
            icon: 'http://www.fergusandbix.com/images/FB-pin.png'
        });
        marker.setMap(map);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
</script>

var myCenter=newgoogle.maps.LatLng（51.059955，-114.211807）；
函数初始化（）{
var mapProp={
中心：迈森特，
缩放：14，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“googleMap”），mapProp）；
var marker=new google.maps.marker({
职位：迈森特，
动画：google.maps.animation.DROP，
图标：'http://www.fergusandbix.com/images/FB-pin.png'
});
marker.setMap（map）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；
var mycenter=new google.maps.LatLng（50.9156772，-113.9640719）；
函数初始化（）{
变量mapProp2={
中心：迈森特2号，
缩放：14，
mapTypeId:google.maps.mapTypeId.2
};
var map=new google.maps.map（document.getElementById（“googleMap2”）、mapProp2）；
var marker=new google.maps.marker({
职位：迈森特2，
动画：google.maps.animation.DROP，
图标：'http://www.fergusandbix.com/images/FB-pin.png'
});
marker.setMap（map）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

不要创建多个

初始化

函数，将相关内容放在一个函数中

代码片段：

var myCenter=new google.maps.LatLng（51.059955，-114.211807）；
var mycenter=new google.maps.LatLng（50.9156772，-113.9640719）；
函数初始化（）{
var mapProp={
中心：迈森特，
缩放：14，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
var map=new google.maps.map（document.getElementById（“googleMap”），mapProp）；
var marker=new google.maps.marker({
职位：迈森特，
动画：google.maps.animation.DROP，
图标：'http://www.fergusandbix.com/images/FB-pin.png'
});
marker.setMap（map）；
变量mapProp2={
中心：迈森特2号，
缩放：14，
mapTypeId:google.maps.mapTypeId.2
};
var map=new google.maps.map（document.getElementById（“googleMap2”）、mapProp2）；
var marker=new google.maps.marker({
职位：迈森特2，
动画：google.maps.animation.DROP，
图标：'http://www.fergusandbix.com/images/FB-pin.png'
});
marker.setMap（map）；
}
google.maps.event.addDomListener（窗口“加载”，初始化）
html，
身体{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}
#谷歌地图，
#谷歌地图2{
身高：100%；
宽度：50%；
边际：0px；
填充：0px
}
#谷歌地图{
浮动：左；
}

在您的
mapProp2
中，mapTypeId是否应该是
google.maps.mapTypeId.ROADMAP
而不是
…ROADMAP 2
？您有两个名为
initialize
的函数，第二个函数写第一个函数。可能重复感谢yuriy636，尼古拉斯·史密斯……两者都帮助清理了代码，但仍然产生了相同的结果。我同意其中一个在抵消另一个，但…不完全确定如何避免这种情况发生。删除第二个初始化并不能删除问题…thakns再次出现。