同一页面上的多个Google地图

时间:2013-05-27 09:28:44

标签: 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>

所以我有两个ID为map_canvas1和map_canvas2的div。但只有第二个显示出来。我在文档的标题中导入了这个:http://maps.google.com/maps/api/js?sensor=false

我需要同时使用分离的javascript工作。管理它是为了让所有功能完全相同,但我需要将它分开。

有什么建议吗?

谢谢!

1 个答案:

答案 0 :(得分:0)

从中创建两个单独的javascript函数,并将它们放在onload函数中。

像这样:

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

function1(variable) {
  do stuff;
}

function2(variable)
  do other stuff;
}

或者你可以使用jQuery来处理onload,我认为实际上可以在body onload上添加多个处理程序。另请参阅http://api.jquery.com/ready/

javascriptmap.php?地图= 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" />