HTML Geolocation API
The HTML Geolocation API is used to determine a user's current location.
Find the User's Location
The HTML Geolocation API is used to determine a user's geographical location.
Because this may jeopardize the user's privacy, the position is not available unless the user approves it.
Making Use of HTML Geolocation
The getCurrentPosition() method is used to return the current position of the user.
The following example returns the user's latitude and longitude:
Here's an example:
- Check to see if Geolocation is available.
- Run the getCurrentPosition() method if it is supported. If this is not the case, a message will be displayed to the user.
- If the getCurrentPosition() method returns a coordinate object to the function specified in the parameter, it is successful (showPosition).
- The Latitude and Longitude are returned by the showPosition() function.
- The preceding example is a very simple Geolocation script with no error handling.
Dealing with Errors and Rejections
The getCurrentPosition() method's second parameter is used to handle errors. It specifies a function to be called if it is unable to obtain the user's location:
Information Regarding Specific Locations
This page has shown how to display a user's location on a map.
Geolocation is also useful for obtaining location-specific information, such as:
- Current local information
- displaying points of interest in the user's vicinity
- Turn-by-turn directions (GPS)
The getCurrentPosition() Method - Data Return:
On success, the getCurrentPosition() method returns an object. The properties of latitude, longitude, and accuracy are always returned. If available, the following properties are returned:
| Property | Returns |
|---|---|
| coords.latitude | The latitude expressed as a decimal number (always returned). |
| coords.longitude | Longitude expressed as a decimal number (always returned). |
| coords.accuracy | The precision of position (always returned). |
| coords.altitude | The elevation in meters above mean sea level (returned if available). |
| coords.altitudeAccuracy | Positional altitude accuracy (returned if available). |
| coords.heading | The direction as measured in degrees clockwise from North (returned if available). |
| coords.speed | The rate of speed in meters per second (returned if available). |
| timestamp | The response's date and time (returned if available). |
Other Interesting Methods for Geolocation Objects
Other interesting methods of the Geolocation object include:
- watchPosition() - Returns the user's current position and continues to update the position as the user moves (like the GPS in a car).
- clearWatch() - This method terminates the watchPosition() method.
The watchPosition() method is demonstrated in the following example. To test this, you'll need an accurate GPS device (such as a smartphone):
Supported Browsers
| Element | Chrome | Firefox | Safari | Edge / IE | Opera |
|---|---|---|---|---|---|
| <address> |
5.0 - 49.0 (http)
50.0 (https) |
9.0 | 3.5 | 5.0 | 16.0 |
FAQs
The HTML navigator geolocation property returns a Geolocation object that can be used to locate the user's position. The syntax for this property is "navigator.geolocation".
The GeolocationCoordinates.accuracy read-only property represents the accuracy, with a 95% confidence level, and it is a strictly positive double. As for security, HTML5 geolocation is secure as it requires the user's permission to share their location. This permission is granted on a per-site basis and can be revoked at any time by the user.
To retrieve the current position of the browser, you can use the HTML Geolocation API's getCurrentPosition() method. This method returns a Geolocation object that contains the latitude, longitude, and accuracy properties. The accuracy of the location depends on various factors and can range from 3 to 15 meters.