HTML 5 Geolocation API

The HTML 5 Geolocation API allows you to access the location of the user. For privacy, user agents asks the permission of user before accessing the location details.

Note: The geolocation API will not work on insecure origins (HTTP).

See the Pen HTML Geolocation API by Mishel Shaji (@mishelshaji) on CodePen.

Geolocation methods

Method	Description
getCurrentPosition()	This method is used to access the current location of the user / device.
watchPosition()	This method can be used to capture the periodic changes in the location of the device.

getCurrentPosition() method

The getCurrentPosition() method accepts three parameters.

Parameter	Description
success callback function	This function is called when location of the device is determined.
error callback function	This parameter is optional and is called when an error occurs. It takes PositionError object as input parameter.
options	This optional parameter can be used to pass additional options. It can have the following options: maximumAge : (milliseconds / infinity) maximum cached position age. timeout : (milliseconds) Time delay before the error callback function is called. If the value is set to 0, the error callback function will not be called. enableHighAccuracy : It can have values true or false.

The getCurrentPosition() method, by default determines the location as fast as possible with less accuracy.

Syntax

 navigator.geolocation.getCurrentPosition(success(), error(), options);

Error handling

The getCurrentPosition() and watchPosition() methods have an optional error handler callback method which returns a read-only PositionError object that has the following properties.

code – A numeric value that holds the error code.
message – A string value that holds the error message.

Error codes and messages

Error Code	Related Constant	Description
0	UNKNOWN_ERROR	Failed to retrieve the location for some unknown reasons.
1	PERMISSION_DENIED	Accessing geolocation failed because user has not granted the permission.
2	POSITION_UNAVAILABLE	Failed to access the location of the device because of some internal errors.
3	TIMEOUT	Failed to retrieve the location within the specified time.

Example

<!DOCTYPE html>
 <html>
 <head>
     <title></title>
 </head>
 <body>
 <script>
 var options = {
    enableHighAccuracy: true,
    timeout: 5000,
    maximumAge: 0
  };
 //Determining the location
 navigator.geolocation.getCurrentPosition(successCall, errorCall, options);
 function successCall(position) 
 {
    document.write('Your current position is:');
    document.write('Latitude:' + position.coords.latitude)
    document.write('Longitude: ' + position.coords.longitude);
    document.write('Accuracy in meters: ' + position.coords.accuracy);
 }
 function errorCall(error)
 {
     document.write('Error occured (Error code: '+ error.code +')');
     document.write('Error message: ' + error.message+'<br>');
     switch(error.code)
     {
         case error.PERMISSION_DENIED:
             document.write("Please grant permission to access location");
             break;
         case error.UNKNOWN_ERROR:
             document.write("Unable to fetch location for some unknown reasons");
             break;
     }
 }
 </script>
 </body>
 </html>