Uncaught ReferenceError: google is not defined when trying to use Google Places API without a map

Question

我知道这是一个非常常见的错误，但我阅读了所有其他 "Uncaught ReferenceError: google is not defined" 个问题，其中 none 个问题帮助我解决了这个问题。我正在使用 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 的建议更新了我的代码，但仍然遇到同样的错误。

Answer 1

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

虽然您从 google 加载 API 的 <script> 被延迟，但您的代码 <script> 没有被延迟。（如果您删除 async 和 defer，您的代码可以运行，但理论上速度较慢。）

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

即，正如 sideroxylon 所提到的，

<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>

Uncaught ReferenceError: google is not defined when trying to use Google Places API without a map

Uncaught ReferenceError: google is not defined when trying to use Google Places API without a map

javascript

google-places-api

google-places