HTML5 Geolocation

HTML5 geolocation help to find or share your location with many users.

  • HTML5 Geolocation API capture your geographical position as longitude and latitude.
  • Longitude and Latitude send it back to server to show position graphically at the map.
  • Geolocation is much more useful and work with GPS enabled devices.
  • Privacy is an obvious concern when you are talking about sharing your physical location with a remote web server.
Syntax :
var geolocation = navigator.geolocation;

Example


Methods

NameDesciption
getCurrentPosition()getCurrentPosition() method used to get the current geolocation of user.
watchPosition()watchPosition() method return get geolocation of user on scheduled time
clearWatch()clearWatch() method remove all the position from the map
Syntax :
function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition
   	(showLocation, errorHandler);
}

Location Properties

PropertyTypeDesciption
coordsObjectReturn the geographic location of the device.
coords.latitudeNumberReturn the latitude estimate in decimal degrees. The value range is [-90.00, +90.00].
coords.longitudeNumberReturn the longitude estimate in decimal degrees. The value range is [-180.00, +180.00].
coords.altitudeNumberReturn the altitude estimate in meters above the WGS 84 ellipsoid.
coords.accuracyNumberReturn the accuracy of the latitude and longitude estimates in meters.
coords.altitudeAccuracyNumberReturn the accuracy of the altitude estimate in meters.
coords.headingNumberReturn the device's current direction of movement in degrees counting clockwise relative to true north.
coords.speedNumberReturn the device's current ground speed in meters per second.
timestampDateReturn the time when the location information was retrieved and the Position object created.
Syntax :
function showLocation( position ) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
}

Handling Errors

  • Geolocation is complicated, and it is very much required to catch any error and handle it gracefully.
  • The geolocations methods getCurrentPosition() and watchPosition() make use of an error handler callback method which gives PositionError object.
  • This object has following two properties:
    • PropertyTypeDescription
    codeNumberContains a numeric code for the error.
    messageStringContains a human-readable description of the error.

  • The following table describes the possible error codes returned in the PositionError object.
    • Code Constant Description
    0 UNKNOWN_ERROR The method failed to retrieve the location of the device due to an unknown error.
    1 PERMISSION_DENIED The method failed to retrieve the location of the device because the application does not have permission to use the Location Service.
    2 POSITION_UNAVAILABLE The location of the device could not be determined.
    3 TIMEOUT The method was unable to retrieve the location information within the specified maximum timeout interval.
Syntax :
function errorHandler( err ) {
  if (err.code == 1) {
    // access is denied
  }
}

Position Options

getCurrentPosition(callback, ErrorCallback, options)
  • Following are the options which can be specified as third argument:
    • Property Type Description
    enableHighAccuracy Boolean Specifies whether the widget wants to receive the most accurate location estimate possible. By default this is false.
    timeout Number The timeout property is the number of milliseconds your web application is willing to wait for a position.
    maximumAge Number Specifies the expiry time in milliseconds for cached location information.
Syntax :
function getLocation() {
   var geolocation = navigator.geolocation;
   geolocation.getCurrentPosition
   	(showLocation, errorHandler, {maximumAge: 75000});
}