Search within TutorialsPark

HTML5 Geolocation API


Use Geolocation API to determine the current Location of the user.


HTML5 Geolocation API


1.The HTML5 Geolocation API allows you to access the current location of the user(or atleast the location of the Device used by the user).

2.The Location consists of a pair of coordinates denoting the latitude and longitude of the subject. Eg:Coordinates for Burj Khalifa, Dubai is ( 25.1972° N, 55.2741° E)

3.Sources used by Geolocation API to determine user Location.

IP Address of the User.:Finds the location of your Internet Service Provider, so not exact location.

Global Positioning System(GPS): By triangulating the location based on signals from GPS satellites orbiting the earth.

Cell Phone ID.: By triangluation of location based on distance from cell towers

Wi Fi Location.: By traingulating the location based from distance from WiFi access points

Address.: By using the Address, Zip Code, street name etc, so not accurate.

Browser Support for Web-Workers API

1.The HTML5 Geolocation API is supported on latest versions of all major browsers.

Compatible Browsers.

internetexplorer safari firefox opera chrome


Internet Explorer, Apple Safari, Mozilla Firefox, Opera , Google Chrome.

2.Before you use Geolocation API on your web document, you need to make sure its supported on the browser. If not you can provide fallback or alternate text, prompting users to update browser

Example: Check Browser Support.

Give it a TRY! »


Getting the current Location :getCurrentPosition()

1.The Current user position can be determined with method getCurrentPosition(callback, error, options) but,only once.

2.The current location of the user(or device) is retrieved by geolocation object which is contained within the navigator.geolocation property .

3.Here, callback : Denotes the function to be called when the location data is available.

error : Specifies the function that will be called when the location data in unavailable, its optional.

options :To specify an options object to be used to fine-tune the data retrieval process, its optional too .

Example:Getting current location with method getCurrentPosition().

Give it a TRY! »


Attributes of position Objects .

Property Value Property Value
LONGITUDE ...... LATITUDE ......
TIME STAMP ...... ACCURACY ......
ALTITUDE ACCURACY ...... HEADING ......
SPEED ...... ALTITUDE ......

1.The position object specifies the details related to the current user's location.

Table: Properties of position object.

Property Description
coords Returns coordination objects to specify current user location.
timestamp Specifies the exact time at which user's location was retrieved.

Properties of Coordination Object .

1.The Coordination object is contained within the Position.coords property of Geolocation API.

Table: Properties of Coordination Object.

Property Description
altitude Returns the altitude relative to the sea level, in meters.
accuracy Returns the accuracy of position coordinates in meters.
altitude accuracy Returns the accuracy of altitude relative to sea level, in meters.
heading Returns the direction of traveling device in degrees.
speed Returns the speed of traveling device in m/s(meters/second).
latitude Returns the position latitude in decimal degrees.
longitude Returns the postion longitude in decimal degrees.

Error handling in Geolocation .

1.Errors can occur quite frequently while working with location calculations of Geolocation API , thus there exits error codes to handle all types of error cases.

2.The second argument error_callback within the getCurrrentPosition() specifies the function to be called in case of an error.

3.The error_callback object consists of code and message.

4.The error code contained within the error.code property can assume three values.

UNKNOWN_ERROR(code 0): Error occured that is not defined by any error codes.

PERMISSION_DENIED(code 1): User didn't grant permission to share location.

POSITION_UNAVAILABLE(code 2): Technique used to retrieve user location failed.

TIMEOUT(code 3): Attempt to retrieve user location exceeded the time limit.

Example: Error Handling with geolocation API.

Give it a TRY! » Note-Refuse permission to allow current location detection, to see the error demo.


Geolocation Options: positionOptions

1.The third argument PositionOptions within the Geolocations method getCurrentPosition() enables you to define how the location data is gathered

2.The following the properties of the PositionOptions object:

enableHighAccuracy: Signals the browser to use high accuracy detection mode, default value is false.

timeout: Sets the maximum time allowed to compute the current location, in milliseconds.

MaximumAge: Denotes maximum age of a cached position after which the browser must start to recalculate the location.

Example: PositionOptions Object Properties

Give it a TRY! »


Repeated Monitoring of Position: watchPosition()

1.Positions can be monitored, by repeatedly updating the position with Geolocation API method

watchPosition(locationUpdate, handleError, options).

2.This method functions similar to getCurrentPosition(), but the locationUpdate function is called continuously as the position changes.

Example:Monitor Position with watchPosition()

Give it a TRY! » TIP- The Geolocation method watchPosition() can be used to monitor the path of a moving object or person.



Stop Location Monitoring: clearWatch()

1.You can stop monitoring the location using the method clearWatch(watchId).

2.This method signals the Geolocation service to stop gathering location updates, Here.

watchId:: Denotes the return value from watchPosition() call, such that the unique request is identified and then cancelled.Thus, stop recieving any further location updates.

Example: stop location monitoring with method clearWatch()

Give it a TRY! »





Related Examples

Related Tags