Unable to get the latitude and Longitude for the weather app

1

I just started building the weather app and wrote the code to get latitude and longitude . But it always shows it as undefined . Here is the code -

var latitude;
var longitude;
var got_location = true;
var error_message = "";

$(document).ready(function(){
    
    getLocation();
    
    if(got_location)
    {
        $("div").html("Latitude : "+latitude+"<br>Longitude : "+longitude);
    }
    else
    {
        $("div").html("Error : "+error_message);
    }
        
    
});

function getLocation()
{
    if(navigator.geolocation)
    {
        navigator.geolocation.getCurrentPosition(getCoordinates, getError);   
    }
    
    else
    {
        got_location = false;
        error_message = "Geolocation is not supported by this browser."
    }
        
}

function getCoordinates(position)
{
    latitude = position.coords.latitude;
    longitude = position.coords.longitude;       
}

function getError(error)
{
    got_location = false;
    switch(error.code) 
    {        
        case error.PERMISSION_DENIED:
            error_message = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            error_message = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            error_message = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            error_message = "An unknown error occurred."
            break;
    }
}

Link - https://codepen.io/kshitij1234/pen/zwmJaM

I am guessing that is because the if condition gets evaluated before the function execution stops but why does this happen? How can I correct this? Also it would be wonderful if you could share some of your experience regarding correct practices of using functions and (document).ready .

Thank you in advance!!

2

"[CodePen]: An infinite loop (or a loop taking too long) was detected, so we stopped its execution. Sorry!"

3

Javascript is event-driven where continuation-passing style is used. Simple put, the code is not run from top to bottom. First the main code is run, and then if any event happens for which there is a listener, the callback for that event is run.

To make code more like in other synchronous languages async functions were invented.

In your code you block the execution of event callbacks with a while loop.

Here’s the version of your pen that uses async/await pattern:

2 Likes
4

I don’t know how to use await, I’ll research it after, but I used the callbacks to call other functions like writing to the document. Is this bad practice with the introduction of promises/await?

After researching, i don’t see how it’s useful in this example. Or for this project. Most of what needs to be done is procedural, unless the camper was drawing with JS.

5

You should be familiar with Promises since they’re supported by all evergreen browsers and easier to reason about than callbacks. Of course you should still be able to use callback properly and understand how asynchronous code works in JavaScript.

navigator.geolocation.getCurrentPosition is an asynchronous function, which means its callback isn’t executed immediately. It is invoked after the main code executes (and after adequate event has been triggered) on a separate stack.

2 Likes
6

I am sorry . That was not the original code in codepen . I was trying to tweak the code a little to get it to work. I have reset it, please try again

7

Thank you!! I did not know about this .