Geolocation

Getting the user's location — getCurrentPosition, watchPosition, permissions, accuracy, and handling errors.

What it is, in plain English: The Geolocation API lets a web page request the user's physical location. The browser asks the user for permission first — you cannot get location silently. getCurrentPosition() gets the location once. watchPosition() tracks the location continuously (for navigation apps). Location data includes latitude, longitude, accuracy, altitude, speed, and heading.

Where this bites you

coords.speed (like heading, altitude and altitudeAccuracy) is null when the device can't measure them, which is usual on laptops and on Wi-Fi-based fixes. JavaScript happily calculates null * 3.6 as 0, so a speed display shows a confident 0.0 km/h instead of admitting it doesn't know.

// <span id="speed"></span>
const speedDisplay = document.getElementById("speed");

navigator.geolocation.getCurrentPosition((position) => {
  speedDisplay.textContent = `${(position.coords.speed * 3.6).toFixed(1)} km/h`;
  console.log(position.coords.speed, speedDisplay.textContent);
});
// null "0.0 km/h"

Getting the user's location

User permission required. The browser always asks before sharing location. You cannot get location without explicit user consent. Also requires HTTPS (or localhost for development).

getCurrentPosition — one-time location

navigator.geolocation.getCurrentPosition(
  // Success callback:
  (position) => {
    const { latitude, longitude, accuracy } = position.coords;
    console.log(`Lat: ${latitude}, Lng: ${longitude}`);
    console.log(`Accuracy: ±${accuracy} metres`);
    showOnMap(latitude, longitude);
  },

  // Error callback:
  (error) => {
    if (error.code === error.PERMISSION_DENIED) {
      showMessage("Please allow location access to use this feature");
    } else {
      showMessage("Could not get your location — try again");
    }
  },

  // Options:
  {
    enableHighAccuracy: true,   // use GPS if available (slower, uses more battery)
    timeout: 10000,             // give up after 10 seconds
    maximumAge: 0,              // don't use cached position (always fresh)
  }
);

watchPosition — continuous tracking

// For navigation — fires every time position changes:
const watchId = navigator.geolocation.watchPosition(
  (position) => {
    updateMapMarker(position.coords.latitude, position.coords.longitude);
    speedDisplay.textContent = `${(position.coords.speed * 3.6).toFixed(1)} km/h`;
  },
  (error) => console.error(error.message),
  { enableHighAccuracy: true }
);

// Stop tracking:
navigator.geolocation.clearWatch(watchId);

The watchPosition example above has exactly this line. Only latitude, longitude and accuracy are always numbers. Check every other field for null before you do arithmetic with it:

const speedDisplay = document.getElementById("speed");

navigator.geolocation.getCurrentPosition((position) => {
  const { speed } = position.coords;             // null when the device can't measure it
  speedDisplay.textContent = speed === null
    ? "speed unavailable"
    : `${(speed * 3.6).toFixed(1)} km/h`;
  console.log(speed, speedDisplay.textContent);
});
// null "speed unavailable"

Calculate distance between two coordinates

// Haversine formula — great-circle distance:
function getDistance(lat1, lng1, lat2, lng2) {
  const R    = 6371;  // Earth radius in km
  const dLat = (lat2 - lat1) * Math.PI / 180;
  const dLng = (lng2 - lng1) * Math.PI / 180;
  const a = Math.sin(dLat/2) ** 2 +
    Math.cos(lat1 * Math.PI/180) * Math.cos(lat2 * Math.PI/180) * Math.sin(dLng/2) ** 2;
  return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
}

// Mumbai to Delhi:
console.log(getDistance(19.076, 72.878, 28.644, 77.216).toFixed(0), "km");  // 1151 km

Try It Yourself

// Geolocation API — get user's location
// Requires user permission (browser shows a prompt)

// Check if available:
if (!("geolocation" in navigator)) {
  console.log("Geolocation not supported");
} else {
  console.log("Geolocation supported — would request permission in real browser");

// getCurrentPosition — one-time location:
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const { latitude, longitude, accuracy, altitude, speed, heading } = position.coords;
      console.log("Location obtained:");
      console.log("  Latitude:", latitude.toFixed(6));
      console.log("  Longitude:", longitude.toFixed(6));
      console.log("  Accuracy:", accuracy, "meters");
      if (altitude !== null) console.log("  Altitude:", altitude, "meters");
      if (speed !== null)    console.log("  Speed:", speed, "m/s");
      console.log("  Timestamp:", new Date(position.timestamp).toLocaleTimeString());
    },
    (error) => {
      switch (error.code) {
        case error.PERMISSION_DENIED:
          console.log("User denied location permission");
          break;
        case error.POSITION_UNAVAILABLE:
          console.log("Location unavailable");
          break;
        case error.TIMEOUT:
          console.log("Request timed out");
          break;
      }
    },
    {
      enableHighAccuracy: true,   // use GPS if available (slower, more battery)
      timeout: 10000,             // max wait: 10 seconds
      maximumAge: 30000,          // accept cached location up to 30 seconds old
    }
  );
}

// Build a Google Maps URL from coordinates:
function mapsUrl(lat, lng) {
  return `https://www.google.com/maps?q=${lat},${lng}`;
}
console.log("Maps URL example:", mapsUrl(19.0760, 72.8777)); // Mumbai

Permissions API and address from coordinates

// Check permission state before requesting:
const perm = await navigator.permissions.query({ name: "geolocation" });
console.log(perm.state);  // "granted", "denied", or "prompt"

perm.addEventListener("change", () => {
  console.log("Permission changed to:", perm.state);
});

// Reverse geocoding — coordinates to address (needs an API):
async function getAddress(lat, lng) {
  const url  = `https://nominatim.openstreetmap.org/reverse?lat=${lat}&lon=${lng}&format=json`;
  const res  = await fetch(url, { headers: { "User-Agent": "MyApp/1.0" } });
  const data = await res.json();
  return data.display_name;
}

// Sort results by proximity to user:
async function sortByDistance(places) {
  const position = await new Promise((resolve, reject) =>
    navigator.geolocation.getCurrentPosition(resolve, reject)
  );
  const { latitude, longitude } = position.coords;

  return places
    .map(place => ({ ...place, distance: getDistance(latitude, longitude, place.lat, place.lng) }))
    .sort((a, b) => a.distance - b.distance);
}

Geolocation spec and coordinate system

The Geolocation API is specified by W3C (w3.org/TR/geolocation). The coordinate system uses WGS84 — the same reference frame as GPS. coords.accuracy is the 95th percentile radius in metres. coords.altitudeAccuracy may be null on devices without altitude sensors. coords.heading is degrees from true north (0°=N, 90°=E), or NaN if speed is 0. The spec does not define the accuracy of the data — that depends on the device's hardware (GPS vs WiFi triangulation vs cell tower).

// Privacy: feature policy can block geolocation in iframes:
// <iframe allow="geolocation 'src'"> — allow from same origin only
// <iframe allow="geolocation"> — allow from any origin

// Never store precise coordinates without user consent.
// Round to 2 decimal places for city-level precision (±1km).

Official Sources

The Codex links only to official documentation and the ECMAScript specification. No third-party tutorials.