HTML Geolocation API

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:

1. Check if geolocation is supported.
2. If supported, run the method getCurrentPosition(). Otherwise, display a message to the user.
3. If the method getCurrentPosition()succeeds, it will return a coordinate object to the function specified in the parameter ( showPosition ).
4. 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:

1. Local information updates
2. Display favorites near the user.
3. 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:

1. watchPosition()- Returns the user's current location and continues to return the updated location as the user moves (like GPS in a car).
2. clearWatch()- Stop the method watchPosition().

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: