Get user geolocation using javascript

W3C has introduced geolocation API in html5. We can use this API to get geographic location of client side device using javascript. Location of device determined by various sources like GPS, wifi network, Bluetooth mac address, GSM/CDMA cell IDs etc. In this article i will explain how to use this API.

List of Geolocation API capable browsers

  • Internet Explorer 9+
  • Firefox 3.5+
  • Chrome
  • Safari 5+
  • Opera 10.6+

Code to get Geolocation

window.onload=function(){
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else
{
alert("Geolocation is not supported by this browser.");
}
}
function showPosition(pos){
alert("Latitude: "+pos.coords.latitude+"nLongitude: "+pos.coords.longitude);
}

The getCurrentPosition() Method Returns Following Data

Property Description
coords.latitude The latitude as a decimal number
coords.longitude The longitude as a decimal number
coords.accuracy The accuracy of position
coords.altitude The altitude in meters above the mean sea level
coords.altitudeAccuracy The altitude accuracy of position
coords.heading The heading as degrees clockwise from North
coords.speed The speed in meters per second
timestamp The date/time of the response

 

Error handling

The second parameter of the getCurrentPosition() method is used to handle errors. It specifies a function to run if it fails to get the user’s location

window.onload=function(){
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else
{
alert("Geolocation is not supported by this browser.");
}
}
function showPosition(pos){
alert("Latitude: "+pos.coords.latitude+"nLongitude: "+pos.coords.longitude);
}
function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      alert("User denied the request for Geolocation.")
      break;
    case error.POSITION_UNAVAILABLE:
      alert("Location information is unavailable.")
      break;
    case error.TIMEOUT:
      alert("The request to get user location timed out.")
      break;
    case error.UNKNOWN_ERROR:
      alert("An unknown error occurred.")
      break;
    }
  }

.watchPosition() Method

This method Returns the current position of the user and continues to return updated position as the user moves.

window.onload=function(){
if(navigator.geolocation)
{
navigator.geolocation.watchPosition(showPosition);
}
else
{
alert("Geolocation is not supported by this browser.");
}
}
function showPosition(pos){
alert("Latitude: "+pos.coords.latitude+"nLongitude: "+pos.coords.longitude);
}

.clearWatch() Method

This method clears even created by .watchPosition() Method

var watchID;
window.onload=function(){
if(navigator.geolocation)
{
watchID=navigator.geolocation.watchPosition(showPosition);
}
else
{
alert("Geolocation is not supported by this browser.");
}
}
function showPosition(pos){
alert("Latitude: "+pos.coords.latitude+"nLongitude: "+pos.coords.longitude);
}
//call this function to stop location updates
function stopWatch(){
   navigator.geolocation.clearWatch(watchID);
}

Published by Sunny

A Mechanical engineer by education and web developer by passion and profession. He lives in Lucknow, India. Currently earning his livings by hitting keyboad. ;)

Leave a comment

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