Geo location in JavaScript

Hi everyone,

In this tutorial I am going to let you guys know about how you can get live location of the user. To do so I am going to use javascript geolocation method.

This Javascript method is not supported by all the browser.

So here is a list of brows support JS geolocation.

  1. Chrome 5.0 & above
  2. Mozilla firefox 3.5 & above
  3. Safari 5.0 & above
  4. Opera 6.0 & above
  5. IE 9.0 & above

So please check yours browser version first before getting started with the geolocation API.

Now lets start with the coding part:

getCurrentPosition() method is used to get user’s current location.

In the location part we will get only long and lati from the javascript code.

function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported please update your browser";
    }
}

So in the above part I have created new function for getting user’s location.

You can see i have used variable named x in the above code this is basically for the output where I am going to show my output.

So let’s start with the coding part for getting user’s location from the javascript code.

function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude; 
}

Now in the above code I have used x variable again to output my data into the html code.

Moreover, I can say we only need to call this function from button or with js to get user’s location.

After this there are some more methods to handle different errors.

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request"
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is not available."
            break;
        case error.TIMEOUT:
            x.innerHTML = "Request time out"
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}

Errors:

You can see in the above code there are 4 type of errors available in the geolocation system.

  1. Permission Denied: Whenever our code run in the browser user will be asked for the permission to get their location if user decline for the same we can show this error to the user.
  2. Position Unavailable: Sometimes user’s location will not be able to determine by the browser so in that case we can show them error for the same.
  3. Timeout : Timeout error will shown when request takes longer than usual time for the response.
  4. Other error : There are many reasons where we can’t get user’s location with the js code so rest all the errors are shown with this.

Now there is a final code for getting user’s long and lat from Javascript.

<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML ="Latitude: "+ position.coords.latitude +
"<br>Longitude: "+ position.coords.longitude;
}
</script>
</body>
</html>

Output for the same code will as follow :

Geo location in JavaScript
Geo location in JavaScript

So that’s al for today guys stay tuned for my further updates.

18 thoughts on “Geo location in JavaScript

Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You definitely know what youre talking about, why throw away your intelligence on just posting videos to your site when you could be giving us something informative to read?

  2. I spent four years trying EVERYTHING in Online Dating, and through a huge amount of trial and error, I produced a system that I will share for you. This book will take you, step by step, through everything you need to know to double, triple or even quadruple the number of women you meet online.

  3. Hi, Neat post. There’s a problem with your web site in internet explorer, would check this… IE still is the market leader and a good portion of people will miss your excellent writing because of this problem.

  4. In this great pattern of things you secure a B- for effort. Exactly where you actually confused everybody was on the details. As they say, the devil is in the details… And that could not be much more correct at this point. Having said that, allow me reveal to you just what exactly did work. The authoring is actually incredibly powerful which is possibly why I am taking the effort to opine. I do not really make it a regular habit of doing that. Next, even though I can certainly notice the leaps in reason you come up with, I am definitely not certain of just how you seem to unite the ideas which in turn help to make the conclusion. For now I shall yield to your point however wish in the near future you connect the dots much better.

  5. I cling on to listening to the rumor talk about getting free online grant applications so I have been looking around for the best site to get one. Could you tell me please, where could i get some?

  6. Superb site you have here but I was curious if you knew of any forums that cover the same topics discussed in this article? I’d really love to be a part of group where I can get feed-back from other experienced people that share the same interest. If you have any recommendations, please let me know. Many thanks!

  7. We absolutely love your blog and find the majority of your post’s to be precisely what I’m looking for. Do you offer guest writers to write content to suit your needs? I wouldn’t mind publishing a post or elaborating on most of the subjects you write regarding here. Again, awesome website!

  8. We’re a bunch of volunteers and starting a brand new scheme in our community. Your website provided us with valuable info to paintings on. You have done a formidable activity and our entire group will likely be grateful to you.

  9. Howdy! I know this is somewhat off topic but I was wondering which blog platform are you using for this site? I’m getting tired of WordPress because I’ve had issues with hackers and I’m looking at options for another platform. I would be great if you could point me in the direction of a good platform.

Please wait...

Subscribe to our newsletter

Want to be notified when our article is published? Enter your email address and name below to be the first to know.