The HTML Geolocation API is used to determine the users location.
The HTML Geolocation API is used to determine the user's location.
Determine the user's location.
The HTML Geolocation API is used to retrieve information about a user's geographical location.
Because this could affect privacy, location information will not be available unless the user consents.
Note : Geolocation is most accurate on devices with GPS, such as smartphones.
Browser support
The numbers in the table indicate the first browser version that fully supports Geolocation.
| API Geolocation |
Google Chrome | MS Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| 5.0 - 49.0 (http) 50.0 (https) |
9.0 | 3.5 | 5.0 | 16.0 |
Note: Starting with Chrome 50, the geolocation API will only work in secure contexts like HTTPS. If your website is hosted on an insecure origin (such as HTTP), requests to retrieve the user's location will no longer work.
Use HTML Geolocation
This method getCurrentPosition()is used to return the user's location.
The example below returns the latitude and longitude of the user's location:
For example:
The example is explained as follows:
- Check if geolocation is supported.
- If supported, run the method
getCurrentPosition(). Otherwise, display a message to the user. - If the method
getCurrentPosition()succeeds, it will return a coordinate object to the function specified in the parameter ( showPosition ). - The function
showPosition()outputs latitude and longitude.
The example above is a very basic Geolocation script, with no error handling.
Error handling and rejection
The second parameter of the method getCurrentPosition()is used for error handling. It specifies a function to run if the user's location information cannot be obtained:
For example:
function showError(error) { switch(error.code) { case error.PERMISSION_DENIED: x.innerHTML = "User denied the request for Geolocation." break; case error.POSITION_UNAVAILABLE: x.innerHTML = "Location information is unavailable." break; case error.TIMEOUT: x.innerHTML = "The request to get user location timed out." break; case error.UNKNOWN_ERROR: x.innerHTML = "An unknown error occurred." break; } }Information about the specific location
This article has shown how to display the user's location on a map.
Geolocation is also very useful for specific location information, such as:
- Local information updates
- Display favorites near the user.
- Turn-by-turn navigation (GPS)
The getCurrentPosition() method returns data.
The method getCurrentPosition()returns an object upon success. The latitude, longitude, and precision attributes are always returned. Other attributes are also returned if available.
| Thuộc tính | Thông tin trả về |
|---|---|
| coords.latitude | Vĩ độ dưới dạng số thập phân (luôn được trả về) |
| coords.longitude | Kinh độ dưới dạng số thập phân (luôn được trả về) |
| coords.accuracy | Độ chính xác của vị trí (luôn được trả về) |
| coords.altitude | Độ cao tính bằng mét trên mực nước biển trung bình (trả về nếu có) |
| coords.altitudeAccuracy | Độ chính xác về độ cao của vị trí (được trả về nếu có) |
| coords.heading | Hướng chuyển động tính bằng độ, theo chiều kim đồng hồ tính từ cực Bắc (trả về nếu có) |
| coords.speed | Tốc độ tính bằng mét trên giây (trả về nếu có) |
| timestamp | Ngày/giờ phản hồi (trả về nếu có) |
Geolocation Objects - Other Interesting Methods
Geolocation objects also have other interesting methods:
watchPosition()- Returns the user's current location and continues to return the updated location as the user moves (like GPS in a car).clearWatch()- Stop the methodwatchPosition().
The example below shows how the method watchPosition()works. You will need an accurate GPS device to test this (such as a smartphone):
For example: