Skip to main content

HTML Geolocation: Access User Location with Geolocation API

HTML Geolocation is a feature that allows web applications to access a user's geographical location information using the browser's built-in geolocation service.

As an example:

if (navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(showPosition);
} else {
     alert("Geolocation is not supported by this browser.");
}

function showPosition(position) {
     var latitude = position.coords.latitude;
     var longitude = position.coords.longitude;
     // Use the latitude and longitude values to display the user's location information
}

In this example:

  • This code checks if the browser supports geolocation and then calls the getCurrentPosition() method to get the user's current position. - The showPosition() function is then called with a position object that contains the latitude and longitude values of the user's location. - The latitude and longitude values can then be used to display the user's location information on the web page.
info

The geolocation data is sensitive information, and users must explicitly grant permission for the web application to access their location information.

Here's an example of how to incorporate the geolocation JavaScript code in an HTML file:

Editor

Loading...

In this example:

  • A button is added to the HTML page, and the getLocation() function is called when the button is clicked.
  • The showPosition() function is then called to display the latitude and longitude values of the user's location in the demo paragraph element.

The getCurrentPosition() Method​

The getCurrentPosition() method is a part of the Geolocation API in JavaScript that allows web developers to retrieve the current position of the user's device.

The getCurrentPosition() method takes two callback functions as parameters: a success callback function and an error callback function.

As an example:

navigator.geolocation.getCurrentPosition(function (position) {
     const latitude = position.coords.latitude;
     const longitude = position.coords.longitude;
     const accuracy = position.coords.accuracy;

     // do something with the latitude, longitude, and accuracy values
});

In this example:

  • The getCurrentPosition() method is called with a callback function that receives a position object containing the device's location data.

The position.coords object contains the following properties:

  • latitude: A number representing the latitude of the device's current position in decimal degrees.
  • longitude: A number representing the longitude of the device's current position in decimal degrees.
  • accuracy: A number representing the accuracy of the latitude and longitude coordinates in meters.

You can use these values to display the device's location information, plot it on a map, or perform any other operation that requires knowledge of the device's location.