0

I copied the code from this question to try and get directions for two points. The point's markers and direction is shown. However, I get an error in the console Uncaught ReferenceError: google is not defined just want to know how to get rid of it.

Below is the JavaScript code that I got from the accepted answer on the above linked question.

function initMap() {
    var pointA = new google.maps.LatLng(51.7519, -1.2578),
        pointB = new google.maps.LatLng(50.8429, -0.1313),
        myOptions = {
            zoom: 7,
            center: pointA
        },
        map = new google.maps.Map(document.getElementById('map-canvas'), myOptions),
        // Instantiate a directions service.
        directionsService = new google.maps.DirectionsService,
        directionsDisplay = new google.maps.DirectionsRenderer({
            map: map
        }),
        markerA = new google.maps.Marker({
            position: pointA,
            title: "point A",
            label: "A",
            map: map
        }),
        markerB = new google.maps.Marker({
            position: pointB,
            title: "point B",
            label: "B",
            map: map
        });

    // get route from A to B
    calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB);

}

function calculateAndDisplayRoute(directionsService, directionsDisplay, pointA, pointB) {
    directionsService.route({
        origin: pointA,
        destination: pointB,
        travelMode: google.maps.TravelMode.DRIVING
    }, function (response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        } else {
            window.alert('Directions request failed due to ' + status);
        }
    });
}

initMap();

Error Screen shot:

enter image description here Thank you

Ele
  • 33,468
  • 7
  • 37
  • 75
Mr Nobody
  • 359
  • 3
  • 9
  • 23

1 Answers1

8

The async defer, on your google script tag, is making the google script load asynchronously (non-instantaneously).

While your script is loading and executing instantly. So, your script is referencing the google api even before it's loaded into the document.

Removing async defer will load the google script in normally, before yours, so you can be sure it will be available.

Tobiq
  • 2,489
  • 19
  • 38
  • @Tobig Even after removing `async defer` I still get the same error? – Mr Nobody Mar 09 '18 at 01:52
  • I'm pretty sure it's a different error. I noticed the error after testing removing `async defer`. It would have to be a new question. – Tobiq Mar 09 '18 at 01:54
  • @BShaps The fact that I'm getting an API KEY error is proof the async problem is fixed, and the script is actually loading in... – Tobiq Mar 09 '18 at 01:56
  • I had and still have the same error, I have added a screen shot to the question which shows exactly where I get the error. – Mr Nobody Mar 09 '18 at 01:57
  • @i fixed the issue as I was calling the `initMap();` at the end of the script. After removing that the error has gone away. Thank you for your help – Mr Nobody Mar 09 '18 at 01:59
  • 1
    ...or you leave the `async defer` on the script tag and use the callback method: `` - https://developers.google.com/maps/documentation/javascript/tutorial – Adam Jenkins Mar 09 '18 at 03:25