单个页面上的多个谷歌地图 - 一次只能加载一个谷歌地图

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

单个页面上的多个谷歌地图 - 一次只能加载一个谷歌地图

回答

相关问题