Google 不是使用 Google Visualization API 定义的；可能是 jQuery 的错答案

【问题标题】：Google is not defined using Google Visualization API; possibly jQuery's faultGoogle 不是使用 Google Visualization API 定义的；可能是 jQuery 的错
【发布时间】：2011-04-05 18:52:45
【问题描述】：

我遇到了与this question 中看到的相同的错误，没有答案。详细地说，我试图在我的代码中加载this demo。我稍微改变了它，因为我没有在任何标题标签中包含它们的代码——这个特定的代码片段将由 jQuery 加载。无论如何，所以我的代码如下所示：

<script type='text/javascript' 
        src='https://www.google.com/jsapi?key=ABQIAAAAKl2DNx3pM....'>
</script>

<script type='text/javascript'>

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', '', 'Country');
    data.addColumn('number', 'Population (mil)', 'a');
    data.addColumn('number', 'Area (km2)', 'b');
    data.addRows(5);
    data.setValue(0, 0, 'CN');
    data.setValue(0, 1, 1324);
    data.setValue(0, 2, 9640821);
    data.setValue(1, 0, 'IN');
    data.setValue(1, 1, 1133);
    /* ... */
    var chart = new google.visualization.IntensityMap(
                  document.getElementById('chart_div'));
    chart.draw(data, {});
}

$(document).ready(function() {
    google.load('visualization', '1', {packages:['intensitymap']});
    google.setOnLoadCallback(drawChart);
});
</script>

这部分代码位于一个 div 中，其可见性根据需要进行切换。全部内容（此处为整个页面）作为 ajax 调用的结果返回。

这里使用 jQuery 的 $(document).ready() 处理程序的理论意味着当文档准备好时应该加载 google。

但是，我得到了这个：

无论该部分是否在 ready() 内。现在这是真正的关键：在 dom explorer 中，我可以找到所说的对象：

谁能先向我解释一下为什么会发生这种情况，然后我该怎么解决它？

作为一个天真的 javascript 开发人员，我尝试在我的 head 标签中包含谷歌脚本。然后产生了类似this question（$ 未定义）的东西，除了我们没有从谷歌加载jQuery，我们在本地托管它。

我们以这种方式成功地加载了许多其他内联的 jQuery 扩展以及 jQuery 代码的额外部分，所以在我看来这应该可以工作。我不知道 jQuery 是否会妨碍 Google/反之亦然，但它们不应该如此。

想法？

【问题讨论】：

标签： javascript jquery google-api

【解决方案1】：

删除 $(document).ready 应该可以解决您的问题。我尝试了您的代码，在注释掉 $(document).ready 之后，它起作用了：

//$(document).load(function() {
    google.load('visualization', '1', {packages:['intensitymap']});
    google.setOnLoadCallback(drawChart);
//});

现在至于为什么会这样，我不知道...无论如何，您不需要等待 document.ready 调用 google.load； google.load 将确保在您的回调 drawChart 被调用时，它可以安全地执行。

【讨论】：

谢谢@Karl，我也试过了，虽然我很害怕；一些问题，同样的症状。我假设我需要等待谷歌的东西加载...
啊啊我已经修复了——那些项目需要在<head>标签中，正如你所说，我不需要$(document).ready()。打勾。
至于“为什么”：谷歌的脚本加载器使用document.write动态加载脚本。当它被延迟时，无论是使用 load/domready 事件，还是使用 setTimeout，当前文档将被覆盖，从而破坏您的代码 - Related answer。

【解决方案2】：

您可以在页面加载后加载图表，但需要特殊回调。

google.load("visualization", "1", {"callback" : drawChart});

https://developers.google.com/loader/#Dynamic

【讨论】：