HTML Geolocation

HTML Geolocation API

The Geolocation API allows web applications to access a user’s current geographic location.

For privacy reasons, location data is only available after the user explicitly grants permission.

Security and Accuracy

The Geolocation API works only in secure contexts such as HTTPS.

It provides the most accurate results on devices with GPS hardware, such as smartphones and smartwatches.

Using the Geolocation API

The API is accessed through navigator.geolocation.

When requested, the browser asks the user for permission and then determines the best available location method.

Get the Current Position

The getCurrentPosition() method retrieves the user’s current location.

 const x = document.getElementById("demo");  function getLocation() {   if (navigator.geolocation) {     navigator.geolocation.getCurrentPosition(success, error);   } else {     x.innerHTML = "Geolocation is not supported by this browser.";   } }  function success(position) {   x.innerHTML =     "Latitude: " + position.coords.latitude +     "<br>Longitude: " + position.coords.longitude; }  function error() {   alert("Sorry, no position available."); } 

How It Works

• Checks whether the browser supports Geolocation
• Requests permission from the user
• Returns latitude and longitude on success
• Handles errors if the request fails

Error Handling

The second parameter of getCurrentPosition() is an error callback.

This allows you to handle different failure scenarios.

 function error(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;   } } 

Location-Based Use Cases

Geolocation is commonly used for:

• Displaying local and regional information
• Showing nearby places and points of interest
• Navigation and tracking applications

Returned Data

The getCurrentPosition() method returns an object with detailed location data.

• coords.latitude – latitude in decimal degrees
• coords.longitude – longitude in decimal degrees
• coords.accuracy – accuracy of the position
• coords.altitude – altitude above sea level (if available)
• coords.altitudeAccuracy – altitude accuracy (if available)
• coords.heading – direction of movement (if available)
• coords.speed – speed in meters per second (if available)
• timestamp – time when the position was retrieved

Watching the User’s Position

The watchPosition() method continuously tracks the user’s location.

It is useful for navigation and real-time tracking.

 const x = document.getElementById("demo");  function getLocation() {   if (navigator.geolocation) {     navigator.geolocation.watchPosition(success, error);   } else {     x.innerHTML = "Geolocation is not supported by this browser.";   } }  function success(position) {   x.innerHTML =     "Latitude: " + position.coords.latitude +     "<br>Longitude: " + position.coords.longitude; } 

Use clearWatch() to stop tracking when it is no longer needed.