0

In the process of upgrading my Route Tracker app, I have encountered problems associated with Google Maps API not loading resulting in the error "Uncaught ReferenceError: google is not defined".

I am including the google maps API URL as follows:

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY"></script>

and the error is generated by the following statement in Javascript:

coords = new google.maps.LatLng(myLat, myLong);

This app worked very well before but unfortunately no longer as I suspect google introduced significant changes. I have looked at the answers corresponding to the same error message but so far to no avail.

The javascript code snippets are shown below:

function ShowLocation(position) 
{           
    var coords;     
    var markerOptions = {
        map: geolocationClass.map,
            position: coords 
        };

    // Fetch coordinates
    var myLat = position.coords.latitude;
    var myLong = position.coords.longitude;

    // Store previous coordinates
    coordinatesClass.lat[distanceTimeClass.counter] = myLat;
    coordinatesClass.lng[distanceTimeClass.counter] = myLong;

    // Google API-ready latitude and longitude
    coords = new google.maps.LatLng(myLat, myLong);  <--- Error here 

    .............

    .............
}

The function ShowLocation gets called as follows: 

function GetLocationUpdate() 
{  
    ..............

    if (navigator.geolocation) 
    {
        geolocationClass.geoLoc = navigator.geolocation;
        geolocationClass.watchID = 
            geolocationClass.geoLoc.watchPosition(ShowLocation, 
            ErrorHandler, options);

        ...........
    }
    ............
}
geocodezip
  • 158,664
  • 13
  • 220
  • 245
Patrice
  • 13
  • 1
  • 1
    Most likely the geolocation is running/returning before the API has loaded. You could try using a [LatLngLiteral](https://developers.google.com/maps/documentation/javascript/reference/coordinates#LatLngLiteral) (which doesn't require the API to be loaded). Please provide a [mcve] that demonstrates your issue. – geocodezip Oct 27 '18 at 00:09
  • Is that the same issue? [google-is-not-defined-when-using-google-maps-v3-in-firefox-remotely](https://stackoverflow.com/questions/6660955/google-is-not-defined-when-using-google-maps-v3-in-firefox-remotely) – Aldo Maria Landini Oct 27 '18 at 00:19

1 Answers1

0

The issue is being caused by calling the new google.maps.LatLng class before the Google Maps JavaScript API is loaded. In the documentations you will see a callback in the script tag like this:

<script src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap"></script>

and in script:

function initMap() {
   map = new google.maps.Map....

This is to make sure that after loading the JavaScript API, initMap will execute.

If the new google.maps.Map executes before the JavaScript API is loaded successfully it will return the error google is not defined. This error is very common even before. The new changes that Google introduced has nothing to do with this.

Hope this helps!

tomjosef
  • 895
  • 6
  • 21
  • Thank you for your reply but unfortunately I have already tried that route many times before without any success. It may still work but only after I have generated a new JavaScript API key to try out for my debug version or at least that's my understanding from the email I have received from Google Cloud Platform support section. I will do this first and then come back with my feedback. – Patrice Oct 30 '18 at 18:23
  • I Generated a new Maps Javascript API Key and restricted it using HTTP referrers restriction (ie __file_url__//android_asset/www/index.html). The error is still "Ungaught Reference Error: google is not defined". – Patrice Nov 01 '18 at 11:58