我知道这是一个非常常见的错误，但我阅读了所有其他“未捕获引用错误：谷歌未定义”的问题，没有一个能帮我解决它。我正在使用GooglePlacesAPI，但我的应用程序没有使用地图，所以我参考了这个问题来解决这个问题。
很多答案都提到了在加载api脚本之前先异步加载，脚本的顺序很重要，但我认为这不是我的问题。我遵循了PlacesAPI文档中的示例，所以我不知道自己做错了什么。
这是我的代码：
<!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不应该同时使用。
而你的
如果您将代码执行推迟到文档加载（并实例化GoogleAPI），那么您的代码应该可以工作。
i、 例如，正如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可以在任何时候运行，即使在DOMContentLoaded之后也是如此。根据这一点，defer确实保持了秩序。
这里有一个执行顺序的好资源：https://www.kirupa.com/html5/running_your_code_at_the_right_time.htm
它显示了延迟发生在DOMContentLoed事件之前，并且async脚本可以在任何时候执行，尽管是在最终的load事件之前。
至于他们的例子为什么有效，请注意他们添加了
<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>
