HTML5 Geolocation API with Example ~ Web CodeHelpers

HTML5 Geolocation API with Example

HTML5 Geolocation API :

One of the best API's from HTML5 API's,  geolocation API is used to track the user location instantly.

Geolocation API used in lot of website like google , to track the user location and to show the results related to that location, in this article we are going to learn in detail about geolocation with example

Geolocation API  :

Geolocation comes with three methods

1.  geolocation.getCurrentPosition()
2.  geolocation.watchPosition()
3.  geolocation.clearPosition()

to use the HTML5 Geolocation API,
As a first step we need to check weather your browser support this HTML5 Geolocation API

Navigator Object will holds the geolocation property

//Checking Geolocation Availability
if (navigator.geolocation) {
alert("Your Browser Support Geolocation Feature");
}else {
alert("Your Browser does not Support Geolocation Feature");

if your developing  desktop based web application, then use below geolocation.getCurrentPosition() method

navigator.geolocation.getCurrentPosition(success_function, error_function, position_options);

if your developing mobile based app or mobile web application, then use the below method to get the accurate postion

navigator.geolocation.watchPosition(success_function, error_function, position_options);

to clear the existing positions like latitude and longitude on move for mobile apps and mobile web application use below method


in Success Function Call Back  is passed a single parameter, a "position" object which has the following properties:

  • position.coords.latitude – The current latitude reading
  • position.coords.longitude – The current longitude reading
  • position.coords.accuracy – The accuracy of the current latitude and longitude readings (in metres)
  • position.coords.speed – The current speed reading in metres per second (you can simply multiply by 2.2369 to convert to miles per hour or multiply by 3.6 to convert to kilometres per hour)
  • position.coords.altitude – The current altitude reading (in metres)
  • position.coords.altitudeAccuracy – The accuracy of the current altitude reading (in metres)

Below example will show to track the Current Location Address 
Live Demo : Your Location Show below Refresh to check your location
Code Show Below
<script src="">
if (navigator.geolocation) {
navigator.geolocation.watchPosition(fnSuccessGeoCall, fnErrorGeoCall);
}else {
alert("Your Browser does not Support Geolocation Feature");

    function fnSuccessGeoCall(position){
                 var lat = position.coords.latitude,
 lng = position.coords.longitude;
               var requestAdd = $.ajax( ""+lat+","+lng+"&sensor=true" )
                .done(function(data) {  
                .fail(function() {
                       $('#showMapAddress').html("Geo Error");});
    function fnErrorGeoCall(error){
                       $('#showMapAddress').html("Geo Error Code:"+error.code);});
<div id="showMapAddress"></div>


Post a Comment

Subscribe updates via Email