Google maps api 3 谷歌地图和谷歌图表在同一页上

由于某些原因，我无法在同一页面中同时加载GoogleMapsV3API和GoogleCharts API

我已经创建了一个工作地图

但是，如果我通过取消注释行来加载charts API：

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

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

我在最近的Chrome上试过这个

---

有什么提示吗？

您可以在事件侦听器之前执行加载，如中所示

或者，您也可以像谷歌文档中描述的那样，通过回调动态地实现这一点

另请参见。

使用可视化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
});

---

将加载回调设置为描述已修复。谢谢@Anto Jurković，注意这一点：使用该方法，API有可能在触发文档加载之前加载，因此回调注册得太晚，并且永远不会被调用。如果必须等待文档加载，则应在文档加载处理程序中调用google.load，以确保回调运行。

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
});