I know this is a really mon error, but I read all the other "Uncaught ReferenceError: google is not defined" questions and none of them helped me fix it. I am using the Google Places API but my application does not use a map so I referred to this question to figure that out.
Many of the answers talked about loading the api script asyncronously before everything else, and the order of the scripts matters, but I don't think that's my issue. I followed the example in the Places API Documentation so I don't know what I am doing wrong.
Here is my code:
<!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=";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>
The issue is specifically with the line
var service = new google.maps.places.PlacesService(document.getElementById('list'));
Thanks!
EDIT: I updated my code as per Jeff's suggestion and still get the same error.
I know this is a really mon error, but I read all the other "Uncaught ReferenceError: google is not defined" questions and none of them helped me fix it. I am using the Google Places API but my application does not use a map so I referred to this question to figure that out.
Many of the answers talked about loading the api script asyncronously before everything else, and the order of the scripts matters, but I don't think that's my issue. I followed the example in the Places API Documentation so I don't know what I am doing wrong.
Here is my code:
<!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./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>
The issue is specifically with the line
var service = new google.maps.places.PlacesService(document.getElementById('list'));
Thanks!
EDIT: I updated my code as per Jeff's suggestion and still get the same error.
Share Improve this question edited Oct 28, 2016 at 2:25 Catherine asked Oct 28, 2016 at 2:14 CatherineCatherine 2511 gold badge2 silver badges15 bronze badges 7- move your first <script> element to after your google script that is within the body element. You are trying to call the script before you've told the page where to find the google service. – user2417483 Commented Oct 28, 2016 at 2:15
- @jeff I already tried that and got the same error – Catherine Commented Oct 28, 2016 at 2:18
- Basically what is happening is that you are calling google for it's code and then before waiting for the code to be fetched and processed by the browser, you are trying to access the none existent code. So this bees a timing issue as to when the google script is available. Using async and defer in the script element isn't probably helping. – user2417483 Commented Oct 28, 2016 at 2:28
- @jeff so how do I make it wait until the code has loaded from google? Also please note that I updated my code above. – Catherine Commented Oct 28, 2016 at 2:39
-
2
Try wrapping the function in
$(document).ready(function()(jQuery) ordocument.addEventListener('DOMContentLoaded', function()in plain JS – sideroxylon Commented Oct 28, 2016 at 2:49
1 Answer
Reset to default 3From my reading, async and defer aren't meant to be used at the same time.
While your <script> that loads the API from google is deferred, your <script> with your code is not deferred. (If you remove async and defer your code works, but is theoretically slower.)
If you defer your code execution until the document is loaded (and the google api instantiated), then your code should work.
i.e., as sideroxylon alluded to,
<script>
$(document).ready(function() {
var service = new google.maps.places.PlacesService(document.getElementById('list'));
...
})
</script>
or
<script>
document.addEventListener('DOMContentLoaded', function() {
var service = new google.maps.places.PlacesService(document.getElementById('list'));
...
})
</script>
...I can not get this to work with async, but I can with defer. async can be run at any time, even after DOMContentLoaded. According to this, defer does preserve order.
Here's a good resource for execution order: https://www.kirupa./html5/running_your_code_at_the_right_time.htm
It shows that defer happens just before the DOMContentLoaded Event and async scripts can execute at any time, although before the final load Event.
As to why their example works, note that they add &callback=initMap to the API URL, which presumably asks their code to call initMap() after their code is initialized. That way you can chain your code (your initMap() function) to their asynchronous load. e.g.,
<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./maps/api/js?key=APIKEY&libraries=places&callback=my_code" defer async ></script>
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744586722a4582354.html
评论列表（0条）