谷歌地图和谷歌图表在同一页面

出于某种原因，我无法在同一页面中加载Google地图v3 API和谷歌图表API。谷歌地图和谷歌图表在同一页面

但是，如果我取消注释行加载图表API：

google.load('visualization', '1.0', {'packages':['corechart']});

...然后突然地图上没有出现，与控制台上没有错误。

我在最近的Chrome上试过这个。

任何提示？

来源

2014-02-23 Yaniv Aknin

您可以事件侦听器之前像updated fiddle

google.load('visualization', '1.0', {'packages':['corechart']}); 

document.addEventListener('DOMContentLoaded', function() { 
    //google.load('visualization', '1.0', {'packages':['corechart']}); 
    google.setOnLoadCallback(function() { 
     window.map = new google.maps.Map(
     document.querySelectorAll('#map')[0], { 
      zoom: 2, 
      center: new google.maps.LatLng(0, 0), 
      mapTypeId: google.maps.MapTypeId.TERRAIN 
     }); 
    }); 
});

执行负载，或者你可以像在谷歌文档Dynamic Load描述做动态与回调。请参阅google.load('visualization'…) bug?。

来源

2014-02-23 10:40:31

设置负载回调的描述[这里]（http://stackoverflow.com/questions/21947924/google-loadvisualization-bug）固定它。谢谢！ –

@AntoJurković，注意这一点：使用该方法可以在文档加载之前加载API，因此回调被注册得太晚并且从不被调用。如果您必须等待文档加载，则应该从文档加载处理程序中调用google.load以确保回调运行。 – asgallant

有（通常）不需要等待文档加载来绘制可视化API的东西。使用这种格式来代替：

google.load('visualization', '1.0', {'packages':['corechart']}); 
google.setOnLoadCallback(function() { 
    window.map = new google.maps.Map(
    document.querySelectorAll('#map')[0], { 
     zoom: 2, 
     center: new google.maps.LatLng(0, 0), 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }); 
}); 

document.addEventListener('DOMContentLoaded', function() { 
    // do other stuff on document load 
});

http://jsfiddle.net/asgallant/3Sg8m/2/

来源

2014-02-24 18:12:10 asgallant

谷歌地图和谷歌图表在同一页面

回答

相关问题