Question

出于某种原因，我无法在同一页面中加载Google maps v3 API和Google chart API。

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

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

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

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

任何提示？

Answer 1

您可以在事件监听器之前执行加载，例如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
        });
    });
});

或者您可以使用google docs Dynamic Load中描述的回调动态执行此操作。

另见google.load('visualization'…) bug?。

Answer 2

通常没有必要等待文档加载来使用Visualization 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/

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

2 个答案: