Unable to fetch location using JavaScript

Question

I'm trying to create a weather app that uses a JSON API to get you the weather in your location. For this purpose, I need the user's location.

    $(document).ready(function(){

    // gets user's location; shows Earth weather if location cannot be accessed
    var longitude = 0;
    var latitude = 0;
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            latitude = Math.floor(position.coords.latitude);
            longitude = Math.floor(position.coords.longitude);
        });
    }

    $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude + "&appid=44db6a862fba0b067b1930da0d769e98", function(json){

        // gets data from json
        if (json.name == "Earth") {
            $("#city").html("Your browser is not giving me access to your location. \n Showing Earth weather instead.");
        } else {
            $("#city").html(json.name);
            $("#country").html(", " + json.sys.country);
        }
        var weather = json.weather[0].main;
        $("#weather").html(weather);
        var tempInKelvin = parseFloat(json.main.temp);
        var tempInCelsius = Math.round((tempInKelvin - 273.15)*10)/10;
        var tempInFahrenheit = tempInCelsius + 32;
        $("#temperature").html(tempInFahrenheit); // shows temperature in Fahrenheit by default

        // switches between Fahrenheit and Celsius when clicked
        var iterator = 1; // because .toggle() was deprecated in jQuery 1.9
        $("#unit").on("click", function(){
            if (iterator % 2 == 1) { 
                $("#unit").html("&#8451"); // change to Celsius
                $("#temperature").html(tempInCelsius);
            } else {
                $("#unit").html("&#8457"); // change back to Fahrenheit
                $("#temperature").html(tempInFahrenheit);
            }
            iterator++;
        });

        // Changes background according to time of day
        var time = new Date();
        time = time.getHours();

        // adds icon, depending on time and weather
        switch (weather.toLowerCase()) {
            case "clouds":
                $("#icon").html('<p style = "color: white;">&#x2601;</p>');
                break;
            case "rain":
                $("#icon").html('<p style = "color: blue;">&#9730;</p>');
                break;
            case "snow":
                $("#icon").html('<p style = "color: blue;">&#10052</p>');
                break;
            case "clear":
                if (time >= 19 || time <= 4) {
                    $("#icon").html("fa-moon-o");
                } else {
                    $("#icon").addClass("fa-sun-o");
                }
                break;
            default:
                $("#icon").html("No icon found :("); 
        }
    });
});

For some reason, it just keeps my longitude and latitude set to 0 without ever getting the location. I've been at this for hours, but I can't figure it out.

And I know that Chrome won't give the page access to my location, but I've put my code up on Codepen, which requests access and receives it. However, my code still doesn't make any changes to the latitude and longitude.

Answer 1

The problem is that you execute your code before you getting the result of callback of

navigator.geolocation.getCurrentPosition()

You need to execute your code async, to await until you'll get the result of success callback, which will update the values of your coordinates.