HTML Geolocation API: What You Need to Know

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.

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.

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 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: