HTML Geolocation
To find the position of a user, using the HTML Geolocation API.
Locate the User's Position
To find out a user’s location, using the HTML Geolocation API.
The position is not exposed unless the user permits it, as this could jeopardize privacy.
Note: GPS-enabled devices, such as cellphones, provide the most precise geolocation.
Browser Support
The first browser version that fully supports Geolocation is shown by the numbers in the table.
CODE MUKVO
Note: The Geolocation API will only function in secure situations, such HTTPS, as of Chrome 50. Requests to retrieve the user’s location will stop working if your website is hosted on an insecure origin (like HTTP).
Using HTML Geolocation
The user’s position can be obtained by using the getCurrentPosition() method.
The example that follows gives back the user’s position’s latitude and longitude:
Example
CODE MUKVO
An explanation of the example:
Verify whether geolocation is enabled.
Use the getCurrentPosition() function if supported. If not, inform the user with a message.
The function designated in the parameter (showPosition) receives a coordinates object if the getCurrentPosition() method is successful.
Latitude and Longitude are output by the showPosition() method.
The aforementioned example is a very simple Geolocation script that doesn’t handle errors.
Handling Errors and Rejections
Error handling is done via the getCurrentPosition() method’s second parameter. If it is unable to determine the user’s location, it indicates which function to call:
Example
CODE MUKVO
Location-specific Information
The example of displaying a user’s position on a map can be found on this page.
Additionally, geolocation is quite helpful for location-specific data, such as:
- current information about the area
- displaying nearby points of interest
- navigation by turn (GPS)
The getCurrentPosition() Method - Return Data
When the getCurrentPosition() function is successful, an object is returned. The characteristics of accuracy, longitude, and latitude are always returned. If available, the following extra properties are returned:
CODE MUKVO
Geolocation Object - Other interesting Methods
There are further intriguing ways to use the Geolocation object:
watchPosition() – Returns the user’s current position and keeps updating it while they travel (much like a car’s GPS).
watchPosition() is terminated by the clearWatch() function.
The watchPosition() method is seen in the example below. To test this, you’ll need a precise GPS device, such as a smartphone:
Example
CODE MUKVO
HTML Geolocation
Geolocation API
user position
location
latitude
longitude
browser support
getCurrentPosition()
showPosition()
error handling
location-specific information
watchPosition()
clearWatch()
HTML
HTML5
HTML tutorials
Learn HTML
Free HTML tutorials
HTML Example
HTML Explained
—
The HTML Geolocation API provides a way for web pages to access the user’s geographical location. This can be useful for a variety of applications, such as providing location-specific information or services.
The Geolocation API uses the browser’s built-in location services, such as GPS or Wi-Fi positioning, to determine the user’s latitude and longitude coordinates. Developers can then use these coordinates to display the user’s location on a map, provide directions, or tailor content to the user’s location.
To use the Geolocation API, you can call the `navigator.geolocation.getCurrentPosition()` method, which will prompt the user to allow the website to access their location. If the user grants permission, the method will return an object containing the user’s latitude, longitude, and other location-related information.
For example:
“`javascript
navigator.geolocation.getCurrentPosition(showPosition);
function showPosition(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
console.log(“Latitude: ” + latitude);
console.log(“Longitude: ” + longitude);
}
“`
The Geolocation API also provides a `watchPosition()` method, which can be used to continuously monitor the user’s location and update the website accordingly. This can be useful for applications that need to track the user’s movement, such as a navigation app.
It’s important to note that the Geolocation API has varying levels of browser support, and some users may not be comfortable sharing their location information. Developers should always provide clear information about how the user’s location will be used and give them the option to opt-out of location tracking.
