HTML Tutorial
HTML Forms
HTML Graphics
HTML Media
HTML API
HTML Geolocation API
The HTML Geolocation API locate’s a user’s position.
Locate the User’s Position
The HTML Geolocation API is used to retrieve the geographical position of a user but the position is unavailable unless it is approved by the user
Using HTML Geolocation
The getCurrentPosition() method return the user’s position.
The below example returns the latitude and longitude of the user’s position:
Example
Click the button to get your coordinates.
Click the button to get your coordinates.
Example explained:
- Check whether the Geolocation is supported.
- If supported, execute the getCurrentPosition() method. If not, show a message to the user.
- If the getCurrentPosition() method is successfully executed, it will return the coordinates object to the function mentioned in the parameter (showPosition)
- The showPosition() function displays the Latitude and Longitude.
Handling Errors and Rejections
The second parameter of the getCurrentPosition() method handles the errors. It defines a function to run if it fails to get the user’s location:
Example
Click the button to get your coordinates.
Click the button to get your coordinates.
Location-specific Information
This page demonstrates how to show a position user’s on a map.
Geolocation plays a beneficial role for location-specific information, like:
- Updated local information.
- Displaying the Points-of-interest near the user.
- Turn-by-turn navigation (GPS).
The getCurrentPosition() Method – Return Data
The getCurrentPosition() method returns an object if successful. The latitude, longitude and accuracy properties are returned. The other properties are returned if available:
Property | Returns |
coords.latitude | The latitude as a decimal number (always returned). |
coords.longitude | The longitude as a decimal number (always returned). |
coords.accuracy | The accuracy of position (always returned). |
coords.altitude | The altitude in meters above the mean sea level (returned if available). |
coords.altitudeAccuracy | The altitude accuracy of position (returned if available). |
coords.heading | The heading as degrees clockwise from North (returned if available). |
coords.speed | The speed in meters per second (returned if available). |
timestamp | The date/time of the response (returned if available). |
Geolocation Object – Other interesting Methods
The Geolocation object also provides other interesting methods:
- watchPosition() – Returns the current position of the user and return the updated position as the user shows any movement.
- clearWatch() – Stops the watchPosition() method.
The below example denotes the watchPosition() method. An accurate GPS is requires to test this
Example
Click the button to get your coordinates.
Click the button to get your coordinates.