Passing geolocation local variable to global variable

Code Feedback
1

I am having trouble passing back latitude and longitude variables to a function. I can pass them back to the html elements as so:
$(document).ready(function() {
navigator.geolocation.getCurrentPosition(locationSuccess, locationError, locationOptions);
});

function locationSuccess(pos) {
  var crd = pos.coords;
  var x = document.getElementById("latitude");
x.innerHTML = crd.latitude;
var y = document.getElementById("longitude");
y.innerHTML = crd.longitude;
}

This does a neat job of updating the page with the latitude and longitude. Nice.

When I try to populate global variables instead of updating the page:
$(document).ready(function() {
navigator.geolocation.getCurrentPosition(locationSuccess, locationError, locationOptions);
console.log(myLatitude);
console.log(myLongitude);
});

  function locationSuccess(pos) {
  var crd = pos.coords;
  myLatitude = crd.latitude;
  myLongitude = crd.longitude;
}

I get:

Uncaught ReferenceError: myLatitude is not defined

I think it might have to do with variable scope, but I cannot figure out what. Please help.

2

Do you have a CodePen you’re working with? It would help to look at all the code.

3

Thanks. Here it is (messy as very much at the initial stages of page development). http://codepen.io/moriartynz/pen/PzaVyw

4

Your error is coming from the console.log call on line 6. The geolocation service on line 5 gets called, and while it’s waiting for the response, the browser calls the next line. Since there’s no such thing as myLatitude before it gets created by your geolocation callback, we get this error. Instead of creating variables in the local scope, I would call the getMyWeather function from inside your geolocation callback and pass in the coordinates as arguments.

5

I’ve just had the exact same issue today. Been reading about callbacks and async after advice on the chat. I get now why it’s happening, but don’t fully understand how the callbacks are used, so I’m still reading.

@llamatarianism helped me out with my code below… it works, but as I don’t fully understand the callbacks yet, I can’t use it. It might help you?

Cheers,

Tim

function getLatLong(callback) {
  $.getJSON('http://ipinfo.io', function(data) {
    var location = data.loc;
    lat = location.split(",")[0];
    lon = location.split(",")[1];
    callback(lat, lon);
  });
}

$(document).ready(function() {
  $("#get-weather").on("click", function() {
    getLatLong(function(lat, lon) {
      console.log(lat + "yes");
      $("#location").text(lat);
    });
  });
});
6

:blush: Thanks so much. It was obviously too late at night to be coding! Asynchronous update of the DOM so that worked after the callback but the console.log function was trying to do this synchronously in the $(document).ready(function() and the callback function had not yet completed so the variables were unpopulated. It all now makes perfect sense.

7

Thanks Tim. Useful code. I finally understand callback functions.

In effect, you send one callback function to go and get the location information and while that is still happening in the background, the next step in the main code in the document ready function is executed. If you put your location retrieval code in the document ready function then it will fail because the lat/lon information is not yet available. When the lat/lon data actually comes back (some time later) then the callback function is finally executed.

The trick is to chain your dependent functions into the callback functions themselves (the next one being - go get the weather data) and do not do this in the main document ready function so that they are only executed when the data it relies on is actually available.