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);
}