谷歌地图API V3 - 引用错误：未定义谷歌

Question

谷歌地图API V3 - 引用错误：未定义谷歌

5

我正在通过学习来自 google 的基本示例来创建Google地图。

我基本上复制并粘贴了头标签中的脚本，但是Firebug控制台返回了以下错误：

ReferenceError: google is not defined

我在头部和google地图脚本一起加载了以下几个脚本。不确定为什么会报错。

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

    <!-- nmr is used to write my own scripts -->
    <script>var nmr = jQuery.noConflict();</script>

    <!-- Google Map scripts -->
    <script>
        function initialize() {
            var mapOptions = {
                zoom: 13,
                center: new google.maps.LatLng(-34.397, 150.644),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
        };

        function loadScript() {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyB7CgOuhFLDkh2VAGW1S2Y" + "sensor=false" + "callback=initialize";
            document.body.appendChild(script);
        }

        window.onload = loadScript;

    </script>

我也尝试在初始化函数之前添加这个，但是没有起作用。

<script> var google = jQuery.noConflict(); </script>

有人能帮忙吗？谢谢！

- user1824996

你解决问题了吗？我也遇到了同样的问题。 - Lion789

2个回答

1

让我们看看代码中发生了什么。

1）让我们忽略ajax.googleapis.com，因为它在发布的代码中根本没有被使用。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

2）产生错误的对象Google是由Google Maps 3 API本身定义的，与jQuery无关。就此而言，API v3不使用任何jQuery，因此下面的代码行需要被删除，因为它与我们之前遇到的问题没有关系。

<script> var google = jQuery.noConflict(); </script>

3）当浏览器加载页面时，从JavaScript中首先调用的是：

window.onload = loadScript;

4) 那么上面的那行代码实际上是什么意思呢？windows.onload会在所有外部文件（包括图像、样式、脚本和其他依赖资源）都加载完成后才触发，而且远晚于DOM已经加载和渲染完毕并准备好进行操作的时间。

这就是问题所在。在windows.onload调用loadScript函数之后，该函数会追加

 script.src = "https://maps.googleapis.com/maps/api/js?key=AIzaSyB7CgOuhFLDkh2VAGW1S2Y" + "sensor=false" + "callback=initialize";

(顺便提一下，你的查询字符串在查询变量之间缺少所有"& 符号".... /js?v=3&key=xyz&sensor=false&callback=initialize <--- 正确的格式)

5) 期待已久的Google API。不是的。尽管url本身包含api这个词，但它只附加了API的加载器。打开上面的文件并查看其中的内容，您将看到一个document.write和一个由各种部分组成的块，这些部分根据您使用调用加载器的查询字符串参数进行有条件地加载。

6) 那么这意味着什么？你调用了initialize函数，认为你正在获取Google API，但实际上你得到的只是包含API的Google API Loader，该API又包含了google对象的定义。因此，在Maps API被附加之前就会触发回调，因此当触发initialize()回调函数时，google未定义。

解决方案

请查看doktormolle的解决方案，该方案使用了一种不同的加载初始函数的方式--> http://jsfiddle.net/doktormolle/7cu2F/

在这里查看一种解决方案，该方案实际上将google地图加载器添加到您的页面中，绕过中间人--> http://jsfiddle.net/doktormolle/zJ5em/

- NickNo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Alessandro Minoccheri · Accepted Answer

您的源代码有误，我建议您指定要加载的确切版本：

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>