未捕获的 ReferenceError：尝试在没有地图的情况下使用 Google Places API 时未定义 google答案

【问题标题】：Uncaught ReferenceError: google is not defined when trying to use Google Places API without a map未捕获的 ReferenceError：尝试在没有地图的情况下使用 Google Places API 时未定义 google
【发布时间】：2017-03-10 20:51:02
【问题描述】：

我知道这是一个非常常见的错误，但我阅读了所有其他“未捕获的 ReferenceError：google 未定义”问题，但没有一个问题能帮助我解决它。我正在使用 Google Places API，但我的应用程序不使用地图，所以我参考了this question 来解决这个问题。

许多答案都谈到了先异步加载 api 脚本，并且脚本的顺序很重要，但我认为这不是我的问题。我按照Places API Documentation 中的示例进行操作，所以我不知道自己做错了什么。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
</head>
<body>
    <h1>Places Near Chicago</h1>
    <div id="list"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places" async defer></script>
    <script>
    var service = new google.maps.places.PlacesService(document.getElementById('list'));
    var request = {
            location: new google.maps.LatLng(41.8781136, -87.6297982),
            radius: 5
    };

    service.search(request, callback);
    function callback(results, status){
            if(status == google.maps.places.PlacesServiceStatus.OK){
                    console.log(status);
                    for (var i = 0; i < results.length; i++) {
                            console.log(results[i].name, results[i].types);
                    }
            }
    };
    </script>
</body>
</html>

问题出在这一行

var service = new google.maps.places.PlacesService(document.getElementById('list'));

谢谢！

编辑：我按照 Jeff 的建议更新了我的代码，但仍然遇到同样的错误。

【问题讨论】：

将您的第一个
@jeff 我已经尝试过了，得到了同样的错误
基本上正在发生的事情是您正在调用 google 获取它的代码，然后在等待浏览器获取和处理代码之前，您正在尝试访问不存在的代码。因此，这成为了 google 脚本何时可用的时间问题。在脚本元素中使用 async 和 defer 可能没有帮助。
@jeff 那么如何让它等到从谷歌加载代码？另请注意，我更新了上面的代码。
尝试将函数包装在$(document).ready(function() (jQuery) 或document.addEventListener('DOMContentLoaded', function() 中的普通JS

标签： javascript google-places-api google-places

【解决方案1】：

根据我的阅读，async 和 defer 不能同时使用。

虽然您从 google 加载 API 的 <script> 被延迟，但您的 <script> 与您的代码不会被延迟。（如果您删除 async 和 defer 您的代码可以工作，但理论上会更慢。）

如果您将代码执行推迟到文档被加载（并且 google api 被实例化），那么您的代码应该可以工作。

即，正如提到的铁木精，

<script>
    $(document).ready(function() {
        var service = new google.maps.places.PlacesService(document.getElementById('list'));
        ...
    })
</script>

或

<script>
    document.addEventListener('DOMContentLoaded', function() {
        var service = new google.maps.places.PlacesService(document.getElementById('list'));
        ...
    })
</script>

...我无法让它与async 一起使用，但我可以与defer 一起使用。 async 可以随时运行，即使在DOMContentLoaded 之后。根据this，defer 确实保持秩序。

这里有一个很好的执行顺序资源：https://www.kirupa.com/html5/running_your_code_at_the_right_time.htm

这表明defer 发生在DOMContentLoaded 事件之前，而async 脚本可以随时执行，尽管在最后的load 事件之前。

至于their example 工作的原因，请注意他们将&callback=initMap 添加到API URL，这可能会要求他们的代码在他们的代码初始化后调用initMap()。这样您就可以将代码（您的initMap() 函数）链接到它们的异步加载。例如，

<script>
    // define your callback before you invoke the API.
    function my_code() {
        var service = new google.maps.places.PlacesService(document.getElementById('list'));
        ....
    }
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY&libraries=places&callback=my_code" defer async ></script>

【讨论】：

是的，我通过将我的脚本包装在 document.addEventListener 并删除 async 和 defer 来让它工作