HTML Geolocation

Introduction

The Geolocation API allows web applications to retrieve the geographical location of a user’s device. This feature enables location-based services and functionalities, such as displaying nearby places, customizing content based on location, and providing location-based recommendations.

The API provides location data using GPS, Wi-Fi, cell towers, or IP-based methods—whichever the device supports. You access it through JavaScript’s navigator.geolocation object, not through an HTML tag.

What You’ll Learn

What Is Geolocation?

Geolocation refers to the process of determining the physical location of a device. The Geolocation API in HTML5 provides a way to access this information programmatically, allowing web applications to use location data for various purposes, such as mapping and location-based services.

How Does Geolocation Work?

The Geolocation API determines a user’s location using various methods, including:

• GPS — provides precise location data using satellite signals (best outdoors on phones).
• IP Address — estimates location based on the IP address of the device (rough, often city-level).
• Network-Based — uses nearby Wi-Fi networks or cell towers to estimate location.

The browser chooses the best available source and returns a Position object with coordinates and an accuracy value in meters.

Using the Geolocation API

To use the Geolocation API, you need to call the navigator.geolocation object, which provides methods for retrieving location data. The main methods are getCurrentPosition and watchPosition.

Getting the Current Position

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);

• successCallback — function called with a Position object on success.
• errorCallback — function called with a PositionError object on failure.
• options (optional) — object specifying settings such as enableHighAccuracy, timeout, and maximumAge.

function successCallback(position) {
  var latitude = position.coords.latitude;
  var longitude = position.coords.longitude;
  console.log('Latitude: ' + latitude + ', Longitude: ' + longitude);
}

function errorCallback(error) {
  console.error('Error occurred:', error.message);
}

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, {
  enableHighAccuracy: true
});

Watching the Position

var watchId = navigator.geolocation.watchPosition(successCallback, errorCallback, options);

• watchId — identifier for the watch request, used for clearing the watch later.

navigator.geolocation.clearWatch(watchId);

Call clearWatch when you no longer need updates—continuous watching uses more battery.

Handling Geolocation Data

The Position object contains information about the user’s location, including:

• coords.latitude — latitude of the user’s location.
• coords.longitude — longitude of the user’s location.
• coords.altitude — altitude (if available, may be null).
• coords.accuracy — accuracy of the location data in meters.

Additional properties such as coords.speed, coords.heading, and timestamp may be available on supported devices.

Error Handling

The PositionError object provides information about errors encountered while retrieving the location. Common error codes include:

• 1 — Permission denied.
• 2 — Position unavailable.
• 3 — Timeout.

Handle errors to provide appropriate feedback to users:

function errorCallback(error) {
  switch (error.code) {
    case error.PERMISSION_DENIED:
      console.error('User denied the request for geolocation.');
      break;
    case error.POSITION_UNAVAILABLE:
      console.error('Location information is unavailable.');
      break;
    case error.TIMEOUT:
      console.error('The request to get user location timed out.');
      break;
    default:
      console.error('An unknown error occurred.');
      break;
  }
}

Privacy and Permissions

Accessing geolocation data requires user permission. Browsers typically prompt users to allow or deny access. It’s important to respect user privacy and use location data responsibly. Inform users why location access is required and how it will be used.

Only request location after a user action (such as clicking “Find near me”)—never on page load without context. Sites must be served over HTTPS (or localhost) for geolocation to work in modern browsers.

Best Practices

• Request Permissions Thoughtfully — request location access only when necessary and explain why it’s needed.
• Handle Errors Gracefully — provide informative error messages and fallback options (manual city entry, map center default).
• Respect Privacy — avoid storing location data longer than necessary and use it only for its intended purpose.
• Optimize Performance — use high accuracy settings only when needed, as they can consume more battery and resources.

Examples Gallery

Five short examples from a basic read to a full page. Try It Yourself demos use plain HTML with no CSS. Allow location when the browser prompts you.

navigator.geolocation.getCurrentPosition(function (pos) {
  console.log(pos.coords.latitude, pos.coords.longitude);
});

12.9716 77.5946

navigator.geolocation.getCurrentPosition(ok, err, {
  enableHighAccuracy: true,
  timeout: 10000,
  maximumAge: 60000
});

enableHighAccuracy: use GPS if available
timeout: fail after 10 seconds
maximumAge: accept cached position up to 60s old

var watchId = navigator.geolocation.watchPosition(function (pos) {
  console.log('Updated:', pos.coords.latitude);
});

// Later:
navigator.geolocation.clearWatch(watchId);

See Try It Yourself for a live preview.

navigator.geolocation.getCurrentPosition(
  function (pos) { /* success */ },
  function (err) {
    if (err.code === 1) alert('Please allow location access.');
    else if (err.code === 3) alert('Timed out — try again.');
  }
);

1 = PERMISSION_DENIED
2 = POSITION_UNAVAILABLE
3 = TIMEOUT

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Geolocation Example</title>
</head>
<body>
  <h1>Geolocation Example</h1>
  <button id="get-location">Get Location</button>
  <p id="location"></p>

  <script>
    document.getElementById('get-location').onclick = function () {
      navigator.geolocation.getCurrentPosition(
        function (position) {
          var lat = position.coords.latitude;
          var lng = position.coords.longitude;
          document.getElementById('location').textContent =
            'Latitude: ' + lat + ', Longitude: ' + lng;
        },
        function (error) {
          document.getElementById('location').textContent =
            'Error: ' + error.message;
        }
      );
    };
  </script>
</body>
</html>

Latitude: 12.9716, Longitude: 77.5946

🚀 Common Use Cases

• Store locators — find the nearest branch or pickup point.
• Maps — center a map on the user’s position.
• Local weather — fetch forecast for current coordinates.
• Check-in apps — tag posts with where the user is.
• Delivery tracking — show driver position with watchPosition.
• Regional content — show prices or language for the user’s country.