我知道这是一个非常常见的错误，但我阅读了所有其他“Uncaught ReferenceError: google is not defined”问题，但没有一个能帮助我修复它。我正在使用 Google Places API，但我的应用程序不使用 map ，所以我引用了 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 的建议更新了我的代码，但仍然遇到同样的错误。
最佳答案
根据我的阅读，async和 defer不能同时使用。
虽然你的 <script>从谷歌加载 API 被推迟，你的 <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>
关于javascript - Uncaught ReferenceError : google is not defined when trying to use Google Places API without a map，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40296991/