navigator.geolocation is asynchronous - it takes some time to get your location, and by that time, the rest of your code has executed. Look at the console.log entries below:
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
console.log(lat); // successfully gives your latitude
});
console.log(lat); // undefined because this code runs before your location comes back
The typical fix for this is to call a function inside your function(position) and send the location as an argument:
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
getTheWeather(lat, lng); // pass lat, lng to the getTheWeather() function
});
// call your weather API using lat and lng arguments passed to this function
function getTheWeather(lat, lng) {
$.getJSON('https://api.darksky.net/forecast/<<your key>>/' + lat + ',' + lng + '?callback=?', function(json) {
// process json here, show it on the page, call other functions, etc.
});
}
For the CORS issues, notice the ?callback=? I added to the URL above. You can use JSONP to work around CORS issues. With $.ajax, we specify dataType: 'jsonp', with $.getJSON we add callback=? as a parameter to the URL.
