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

Question

I know this is a really common 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.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>

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.

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 becomes a timing issue as to when the google script is available. Using async and defer in the script element isn't probably helping. — , Oct 28 '16 at 02: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, Oct 28 '16 at 02:39
Try wrapping the function in `$(document).ready(function()` (jQuery) or `document.addEventListener('DOMContentLoaded', function()` in plain JS — sideroxylon, Oct 28 '16 at 02:49
Related: http://stackoverflow.com/questions/11043656/async-and-document-ready — rrauenza, Nov 01 '16 at 16:37
Also related: http://stackoverflow.com/questions/9237044/async-loaded-scripts-with-domcontentloaded-or-load-event-handlers-not-being-call — rrauenza, Nov 01 '16 at 16:43

rrauenza · Accepted Answer · 2016-11-01T17:20:50.670

From 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.com/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.com/maps/api/js?key=APIKEY&libraries=places&callback=my_code" defer async ></script>

Yeah I got it to work by wrapping my script in a `document.addEventListener` and removing `async` and `defer` — Catherine, Nov 01 '16 at 23:30

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

1 Answers1