多個谷歌地圖在同一頁

我在這個論壇上看到了一些關於這個話題，但沒有得到我正在尋找的答案。多個谷歌地圖在同一頁

如果我用這樣的代碼：

<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>

所以，我有兩個div ID爲map_canvas1和map_canvas2。但只有第二個被顯示。我有這個文件的頭文件中導入：http://maps.google.com/maps/api/js?sensor=false

我需要使兩個工作，但與分離的JavaScript。管理它與所有功能相同，但我需要它分離。

有什麼建議嗎？

謝謝！

來源

2013-05-27 user980902

使兩個獨立的javascript函數出來，並把它們放在onload函數中。

像這樣：

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

function1(variable) { 
    do stuff; 
} 

function2(variable) 
    do other stuff; 
}

另外，您可以使用jQuery來處理onload事件，我認爲可以將多個處理器實際上增加了身體的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" />

來源

2013-05-27 09:33:29

嗨！謝謝你會試試看。任何改變完全分離？我試着用多個地圖來構建它的JavaScript。所以當出現一些地圖時，我想爲它添加javascript，因爲我不知道還會有多少人。 – user980902

再次嗨。這沒關係。但我仍然需要將加載函數分開。如上所述，我正在建立JavaScript。所以需要爲地圖＃1輸出，然後在地圖＃2的一些代碼之後輸出，等等。這可能嗎？ – user980902

我認爲jQuery可以完全分離。使用jQuery可能有點多，但通常當你開始使用它時，沒有它就很難做到。我喜歡使用jQuery，以便在相應的div在那裏時才啓動該函數。否則，你也可以用php或類似的方法生成腳本文件，並按需求調用。無論如何，把這個javascript放在一個單獨的文件中通常會更好。如果你有一個jsFiddle或更多的代碼，我可以幫助更多，如果需要的話。 –

多個谷歌地圖在同一頁

回答

相關問題