Google maps 同一页面上有多个谷歌地图

我在这个论坛上看到了一些关于这个的话题，但是没有得到我想要的答案

如果我使用这样的代码：

<script type="text/javascript">
    (function() {
        window.onload = function(){
            var pinkParksStyles = '';
        var pinkMapType = new google.maps.StyledMapType(pinkParksStyles,
            {name: "Our Location"});
        var mapOptions = {
            zoom: 11,
            center: new google.maps.LatLng(41.3850639,2.1734035),
            mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'pink_parks']
            }
        };
        var map = new google.maps.Map(document.getElementById('map_canvas1'), mapOptions);
          map.mapTypes.set('pink_parks', pinkMapType);
          map.setMapTypeId('pink_parks');


        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(41.3850639,2.1734035),
            map: map
        }); 
        }
    })();
   </script>
    <script type="text/javascript">
    (function() {
        window.onload = function(){
            var pinkParksStyles = '';
        var pinkMapType = new google.maps.StyledMapType(pinkParksStyles,
            {name: "Our Location"});
        var mapOptions2 = {
            zoom: 11,
            center: new google.maps.LatLng(41.3850639,2.1734035),
            mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'pink_parks']
            }
        };
        var map2 = new google.maps.Map(document.getElementById('map_canvas2'), mapOptions2);
          map2.mapTypes.set('pink_parks', pinkMapType);
          map2.setMapTypeId('pink_parks');


        var marker2 = new google.maps.Marker({
            position: new google.maps.LatLng(41.3850639,2.1734035),
            map: map2
        }); 
        }
    })();
   </script>

（功能（）{
window.onload=函数（）{
var pinkParksStyles=''；
var pinkMapType=new google.maps.StyledMapType（pinkParksStyles，
{名称：“我们的位置”}）；
变量映射选项={
缩放：11，
中心：新google.maps.LatLng（41.3850639,2.1734035），
mapTypeControlOptions：{
MapTypeId:[google.maps.MapTypeId.ROADMAP，'pink_parks']
}
};
var map=new google.maps.map（document.getElementById（'map_canvas1'），mapOptions）；
map.mapTypes.set（'pink_parks'，pinkMapType）；
map.setMapTypeId（'pink_parks'）；
var marker=new google.maps.marker({
位置：新google.maps.LatLng（41.3850639,2.1734035），
地图：地图
}); 
}
})();
（功能（）{
window.onload=函数（）{
var pinkParksStyles=''；
var pinkMapType=new google.maps.StyledMapType（pinkParksStyles，
{名称：“我们的位置”}）；
变量映射选项2={
缩放：11，
中心：新google.maps.LatLng（41.3850639,2.1734035），
mapTypeControlOptions：{
MapTypeId:[google.maps.MapTypeId.ROADMAP，'pink_parks']
}
};
var map2=new google.maps.Map（document.getElementById（'Map\u canvas2'），mapOptions2）；
map2.mapTypes.set（'pink_parks'，pinkMapType）；
map2.setMapTypeId（'pink_parks'）；
var marker2=新的google.maps.Marker({
位置：新google.maps.LatLng（41.3850639,2.1734035），
地图：map2
}); 
}
})();

所以我有两个div，ID map_canvas1和map_canvas2。但只有第二个会显示出来。我已将其导入文档的标题中：

我需要使这两个工作，但与单独的javascript。我把所有的东西都放在同一个功能里，但我需要把它们分开

有什么建议吗

---

谢谢

从中生成两个单独的javascript函数，并将它们都放在onload函数中

像这样：

window.onload = function(){
  function1(variable);
  function2(variable);
}

function1(variable) {
  do stuff;
}

function2(variable)
  do other stuff;
}

或者，您可以使用jQuery来处理onload，我认为这实际上可以向body onload添加多个处理程序。另见

php？map=xxx

$(function() {
  $("#divID").each( function() {
    showMap(divID);
  });
});

showMap(divID) {
  show map on #divID
};

在html/php文件上：

<script scr="javascriptmap.php?map=map1" />
<script scr="javascriptmap.php?map=map2" />

嗨！谢谢，我会试试的。完全分开有什么变化吗？我尝试使用多个映射动态构建javascript。所以，当一些地图出现时，我想为它添加javascript，因为我不知道还有多少地图会出现。这一切都好。但是我仍然需要分离加载函数。如前所述，我正在动态构建javascript。所以需要为map#1输出，然后在为map#2编写一些代码之后，依此类推。这是可能的吗？我认为jQuery可以完全独立完成。仅仅为了这个目的使用jQuery可能有点多，但一般来说，当您开始使用它时，没有它很难做事情。我也喜欢使用jQuery，仅当相应的div存在时才启动函数。否则，您也可以使用php或类似工具生成脚本文件，并根据需要调用它。无论如何，通常最好将javascript放在一个单独的文件中。如果你有一个JSFIDLE或更多的代码，我可以在需要的时候提供更多帮助。似乎在没有ready或load包装器的情况下调用map1get（）和map2get（）就可以做到这一点。请记住，对于大多数映射，DOM的实际加载是很重要的。当您开始将javascript放在单独的js文件中时，这些加载包装开始变得重要，所以请记住这一点。如果您需要更多帮助，请说出来，否则请将此答案标记为已接受：）