單個頁面上的多個谷歌地圖 - 一次只能加載一個谷歌地圖

我對HTML和Javascript非常陌生（不到一週的體驗），並陷入以下情況。我用R的googleVis包（簡單的東西 - 只是地圖上的標記）創建了6個谷歌地圖可視化。我已經從R中的googleVis對象中提取了Javascript，並將它們包含在一個簡單的網站中，該網站包含6個不同地圖中的6個div。單個頁面上的多個谷歌地圖 - 一次只能加載一個谷歌地圖

每個JavaScript文件包括一個函數來創建一個JSON對象，來繪製地圖的功能，並且以顯示地圖的函數：

//define JSON  
function gvisDataWest() 
     { 
      var data = new google.visualization.DataTable(); 
      var datajson = 
     [ 
     [ 
      33.5313, 
      -112.1774, 
     "<p>2005-2009 Poverty Rate: 40.7%</p> <p>2000 Poverty Rate: 34.3%</p> <p>Significant difference: 0.0 points </p>" 
     ], 
     ... many rows of data ... 
    ]; 
    data.addColumn('number','Latitude'); 
    data.addColumn('number','Longitude'); 
    data.addColumn('string','tip'); 
    data.addRows(datajson); 
    return(data); 
    } 

//draw chart 
function drawChartWest() { 
    var data = gvisDataWest(); 
    var options = {}; 
options["showTip"] = true; 
options["enableScrollWheel"] = true; 
options["width"] = 400; 

    var chart = new google.visualization.Map(
     document.getElementById('West') 
    ); 
    chart.draw(data,options); 
} 

//display chart 
function displayChartWest() 
{ 
    google.load("visualization", "1", { packages:["map"] }); 
    google.setOnLoadCallback(drawChartWest); 
}

每個JavaScript文件包括用於的不同區域的函數和數據該國（例如，會有gvisDataMidwest（），givsDataSouthEast（）等）的定義。

這裏的大致我的HTML是什麼樣子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
     "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head> 
    <meta content="text/xml; charset=UTF-8" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=8" /> 
    <script type="text/javascript" src="http://www.google.com/jsapi"></script> 
    <script src="../povscripts/map1.js" type="text/javascript"></script> 
    <script src="../povscripts/map2.js" type="text/javascript"></script> 
    <script src="../povscripts/map3.js" type="text/javascript"></script> 
    <script src="../povscripts/map4.js" type="text/javascript"></script> 
    <script src="../povscripts/map5.js" type="text/javascript"></script> 
    <script src="../povscripts/map6.js" type="text/javascript"></script> 
    </head> 
    <body> 
     ...a bunch of divs, headers, <p>'s, etc... 
     ...then six divs like this, each with an appropriate id: 
     <div class="anncdiv"> 
      <div class="bannertitle"> 
       <p class="btxt">West</p> 
      </div> 
      <div class="anncdivIn" id="West"> 
      <script type="text/javascript"> displayChartWest() </script> 
      </div> 
     </div> 
    <div class="anncdiv"> 
     <div class="bannertitle"> 
      <p class="btxt">Midwest</p> 
     </div> 
     <div class="anncdivIn" id="Midwest"> 
     <script type="text/javascript"> displayChartMidwest() </script> 
     </div> 
    </div>

一個問題：隨着目前我鵝卵石這個網站一起，途中如果有兩個dsplayChart * *（）函數被調用的任何位置該網站（如本例中的displayChartWest（）和displayChartMidwest（））所有div都顯示爲空白。但是，如果我只是包含這些函數調用之一，那麼地圖在相應的div中顯示得很好。不知何故，調用這些函數中的兩個或更多會導致衝突，但我只是不知道爲什麼。非常感謝您的幫助。歡呼，AR

來源

2011-11-03 Al R.

我想你可能需要等到DOM加載之後才啓動你的圖表。

<body onload="displayCharts()"> 
...page source... 
<script type="text/javascript"> 
    function displayCharts() { 
     displayChartWest(); 
     displayChartMidwest(); 
    } 
</script> 
</body>

來源

2011-11-03 03:34:06

我想這可能是這樣的，但是當我嘗試在body標籤或window.onload中使用onload時，或者甚至包含jQuery並使用類似$（document）.ready（）的東西時，我遇到了相同的結果。 –

我試着在另一臺機器上加載這個，並且能夠獲得三張要加載的地圖，但添加了第四張地圖（或第四次調用displayChart ****（）函數）打破了該網站。我的有限理解是我想到了加載地圖的方法，但我不知道該怎麼轉... –

嗯，把每張地圖放在一個單獨的'iframe'裏怎麼樣？ –

而不是這樣做：不使用像jQuery庫，你可以使用身體onload事件做

google.load("visualization", "1", { packages:["map"] }); 
google.setOnLoadCallback(drawChartWest);

，而不是嘗試這個辦法：

google.load("visualization", "1", { packages:["map"],callback: drawChartWest});

來源

2013-04-19 16:12:55

單個頁面上的多個谷歌地圖 - 一次只能加載一個谷歌地圖

回答

相關問題