HTML Geolocation API

Imagine you’re building a weather app, a delivery tracker, or a location-based game. You’ll need to know where the user is — and that’s where the Geolocation API comes in. It’s a powerful tool that lets you fetch a user's current location using just HTML and JavaScript.

The Geolocation API is a built-in browser feature that lets websites request a user’s latitude and longitude. This data can come from GPS, Wi-Fi, IP address, or cell tower triangulation — depending on the device and permissions.

The API is accessed through the navigator.geolocation object. You can use the getCurrentPosition() method to request the user's current location.

<button onclick="getLocation()">Get My Location</button>
<p id="output"></p>

<script>
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
    document.getElementById('output').innerText = "Geolocation is not supported by this browser.";
  }
}

function showPosition(position) {
  const lat = position.coords.latitude;
  const lon = position.coords.longitude;
  document.getElementById('output').innerText = 
    "Latitude: " + lat + "\nLongitude: " + lon;
}

function showError(error) {
  document.getElementById('output').innerText = "Error: " + error.message;
}
</script>

Latitude: 17.385  
Longitude: 78.486

let watchId;

function startTracking() {
  watchId = navigator.geolocation.watchPosition((pos) => {
    document.getElementById('output').innerText =
      'Tracking...\nLat: ' + pos.coords.latitude + '\nLon: ' + pos.coords.longitude;
  });
}

function stopTracking() {
  navigator.geolocation.clearWatch(watchId);
}
</script>

<button onclick="startTracking()">Start Tracking</button>
<button onclick="stopTracking()">Stop Tracking</button>

• Browsers always ask the user to allow or block location access.
• HTTPS is required for geolocation on most browsers (no access via HTTP).
• Respect the user's privacy: don’t store or share location without consent.

• Show local weather or time
• Auto-fill country/state in forms
• Find nearby stores or service centers
• Power games or AR experiences based on real locations

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

The HTML5 Geolocation API gives your website a sense of place. You’ve learned how to:

• Request location with getCurrentPosition()
• Track updates with watchPosition()
• Handle errors gracefully
• Respect user privacy and permissions

Choose the option that lists all and only the correct statements.

1. getCurrentPosition()
2. watchPosition()
3. clearWatch()
4. setPosition()

Choose the option that lists all and only the correct statements.

1. Latitude
2. Longitude
3. Altitude
4. User's IP address

Next, we’ll explore how to integrate geolocation data with mapping libraries like Leaflet or Google Maps to visualize user locations in real-time.