Google多个GeoMaps，API

Question

如何使用多个GeoMaps？
如果我只有一张地图，一切都可以。如果我尝试添加另一个地图，但没有再次加载geomap可视化文件，地图不会加载，如果我尝试加载它们，我会得到一个错误：Uncaught TypeError: Object #<Object> has no method 'Load'如果我更改了这两个地图的函数名称是相同的“第二个地图的名字，然后我不得不改变回调

google.setOnLoadCallback(drawMap); 

但是，如果我这样做，我得到上面张贴的错误....

更多代码：

//first map 
    <script type="text/javascript"> 

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

    google.setOnLoadCallback(drawMap); 



    function drawMap() { 

     var data = new google.visualization.DataTable(); 

     data.addRows(16); 

     data.addColumn("string", "City"); 

     data.addColumn("number", "Numar anunturi");   

     data.setValue(1, 0, 'Ilfov'); 

     data.setValue(1, 1, 6); 



     var options = {width: 800,height:400}; 

     options["region"] = "RO"; 

     options["colors"] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors 

     options["dataMode"] = "markers"; 


     var container = document.getElementById("map_chart_div"); 

     var geomap = new google.visualization.GeoMap(container); 

      geomap.draw(data, options); 

    } 

    </script> 

     //second map 

    <script type="text/javascript">  

    function drawMap() { 

     var data = new google.visualization.DataTable(); 

     data.addRows(16); 

     data.addColumn("string", "City"); 

     data.addColumn("string", "pret/mp:"); 

     data.setValue(0, 0, 'Ilfov'); 

     data.setValue(0, 1, '50.44');  


     var options = {width: 800,height:400}; 

     options["region"] = "RO"; 

     options["colors"] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors 

     options["dataMode"] = "markers";  

     var container = document.getElementById("map_pret_div"); 

     var geomap = new google.visualization.GeoMap(container);  

     geomap.draw(data, options); 

    } 

    </script> 

Answer 1

我修改你的代码为接下来，它现在似乎工作，但你必须耐心等待第二张地图加载。在第二张地图发射前，我正在听第一张地图上的drawingDone事件。我的理论是，这种蹒跚的行为阻止了两个地图在Visualization API内部彼此的数据结构之间相互踩踏。但即使我对错误的原因，这至少起作用。

我的更改可以使用一些整理。对于那个很抱歉。我有点匆忙，但是在我跑出去做其他事情之前，希望得到工作代码。

<script type="text/javascript"> 

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

function drawMaps() { 
    drawMap1(); 
} 

function drawMap1() { 

    var data = new google.visualization.DataTable(); 

    data.addRows(16); 

    data.addColumn("string", "City"); 

    data.addColumn("number", "Numar anunturi");   

    data.setValue(1, 0, 'Ilfov'); 

    data.setValue(1, 1, 6); 



    var options = {width: 800,height:400}; 

    options["region"] = "RO"; 

    options["colors"] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors 

    options["dataMode"] = "markers"; 


    var container = document.getElementById("map_chart_div"); 

    var geomap = new google.visualization.GeoMap(container); 

    geomap.draw(data, options); 
    google.visualization.events.addListener(geomap, 'drawingDone', drawMap2); 
} 

function drawMap2() { 
    var data = new google.visualization.DataTable(); 

    data.addRows(16); 

    data.addColumn("string", "City"); 

    data.addColumn("string", "pret/mp:"); 

    data.setValue(0, 0, 'Ilfov'); 

    data.setValue(0, 1, '50.44');  


    var options = {width: 800,height:400}; 

    options["region"] = "RO"; 

    options["colors"] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors 

    options["dataMode"] = "markers";  

    var container = document.getElementById("map_pret_div"); 

    var geomap2 = new google.visualization.GeoMap(container);  

    geomap2.draw(data, options); 

} 
</script>