HTML 5 Geolocation API

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.

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

MethodDescription
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.

ParameterDescription
success callback functionThis function is called when location of the device is determined.
error callback functionThis parameter is optional and is called when an error occurs. It takes PositionError object as input parameter.
optionsThis 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 CodeRelated ConstantDescription
0UNKNOWN_ERRORFailed to retrieve the location for some unknown reasons.
1PERMISSION_DENIEDAccessing geolocation failed because user has not granted the permission.
2POSITION_UNAVAILABLEFailed to access the location of the device because of some internal errors.
3TIMEOUTFailed 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>
Share Tweet Send
0 Comments
Loading...
You've successfully subscribed to GeekInsta
Great! Next, complete checkout for full access to GeekInsta
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.