JS Geolocation API Guide: A Complete Tutorial

if ("geolocation" in navigator) {
  console.log("Geolocation is supported");
} else {
  console.log("Geolocation is not supported by this browser");
}

navigator.geolocation.getCurrentPosition(
  // Success callback
  (position) => {
    console.log("Latitude:", position.coords.latitude);
    console.log("Longitude:", position.coords.longitude);
    console.log("Accuracy:", position.coords.accuracy, "meters");
    console.log("Timestamp:", new Date(position.timestamp));
  },
  // Error callback
  (error) => {
    console.error(`Geolocation error (${error.code}): ${error.message}`);
  },
  // Options
  {
    enableHighAccuracy: true,
    timeout: 10000,
    maximumAge: 0,
  }
);

// Fast, low-power position (cell tower / Wi-Fi)
const lowAccuracyOptions = {
  enableHighAccuracy: false,
  timeout: 5000,
  maximumAge: 60000, // Accept 1-minute-old cache
};
 
// Precise GPS position (slower, battery-intensive)
const highAccuracyOptions = {
  enableHighAccuracy: true,
  timeout: 15000,
  maximumAge: 0, // Always get fresh position
};
 
// Balance: try high accuracy, fall back to cached
const balancedOptions = {
  enableHighAccuracy: true,
  timeout: 10000,
  maximumAge: 30000, // Accept 30-second cache
};

function handleGeolocationError(error) {
  switch (error.code) {
    case error.PERMISSION_DENIED:
      console.error("User denied geolocation permission");
      showMessage("Please enable location access in your browser settings.");
      break;
    case error.POSITION_UNAVAILABLE:
      console.error("Position information is unavailable");
      showMessage("Unable to determine your location. Check GPS/Wi-Fi.");
      break;
    case error.TIMEOUT:
      console.error("Geolocation request timed out");
      showMessage("Location request timed out. Please try again.");
      break;
    default:
      console.error("Unknown geolocation error:", error.message);
      showMessage("An unexpected error occurred.");
  }
}
 
navigator.geolocation.getCurrentPosition(
  (pos) => console.log(pos.coords.latitude, pos.coords.longitude),
  handleGeolocationError,
  { enableHighAccuracy: true, timeout: 10000 }
);

let watchId = null;
 
function startTracking() {
  watchId = navigator.geolocation.watchPosition(
    (position) => {
      console.log("Updated position:");
      console.log(`  Lat: ${position.coords.latitude}`);
      console.log(`  Lng: ${position.coords.longitude}`);
      console.log(`  Accuracy: ${position.coords.accuracy}m`);
 
      if (position.coords.speed !== null) {
        console.log(`  Speed: ${position.coords.speed} m/s`);
      }
    },
    (error) => {
      handleGeolocationError(error);
      if (error.code === error.PERMISSION_DENIED) {
        stopTracking();
      }
    },
    {
      enableHighAccuracy: true,
      timeout: 20000,
      maximumAge: 5000,
    }
  );
}
 
function stopTracking() {
  if (watchId !== null) {
    navigator.geolocation.clearWatch(watchId);
    watchId = null;
    console.log("Tracking stopped");
  }
}
 
// Start
startTracking();
 
// Stop after 5 minutes
setTimeout(stopTracking, 5 * 60 * 1000);

async function checkGeolocationPermission() {
  if (!navigator.permissions) {
    return "unknown"; // Permissions API not supported
  }
 
  try {
    const status = await navigator.permissions.query({ name: "geolocation" });
 
    console.log("Current permission:", status.state);
    // "granted", "denied", or "prompt"
 
    // Listen for permission changes
    status.addEventListener("change", () => {
      console.log("Permission changed to:", status.state);
    });
 
    return status.state;
  } catch {
    return "unknown";
  }
}
 
// Conditional UI based on permission state
async function showLocationUI() {
  const permission = await checkGeolocationPermission();
 
  switch (permission) {
    case "granted":
      // Silently get location without prompt
      getLocation();
      break;
    case "denied":
      showSettingsInstructions();
      break;
    case "prompt":
      showLocationRequestButton();
      break;
    default:
      showLocationRequestButton();
  }
}

function getPosition(options = {}) {
  return new Promise((resolve, reject) => {
    if (!("geolocation" in navigator)) {
      reject(new Error("Geolocation is not supported"));
      return;
    }
 
    navigator.geolocation.getCurrentPosition(resolve, reject, options);
  });
}
 
// Usage with async/await
async function showUserLocation() {
  try {
    const position = await getPosition({
      enableHighAccuracy: true,
      timeout: 10000,
    });
 
    const { latitude, longitude, accuracy } = position.coords;
    console.log(`Location: ${latitude}, ${longitude} (+/- ${accuracy}m)`);
  } catch (error) {
    handleGeolocationError(error);
  }
}

class LocationService {
  constructor(defaultOptions = {}) {
    this.options = {
      enableHighAccuracy: true,
      timeout: 10000,
      maximumAge: 0,
      ...defaultOptions,
    };
    this.watchId = null;
    this.lastPosition = null;
    this.listeners = new Set();
  }
 
  async getPermission() {
    if (!navigator.permissions) return "unknown";
    try {
      const result = await navigator.permissions.query({ name: "geolocation" });
      return result.state;
    } catch {
      return "unknown";
    }
  }
 
  getCurrentPosition(options = {}) {
    return new Promise((resolve, reject) => {
      navigator.geolocation.getCurrentPosition(
        (position) => {
          this.lastPosition = position;
          resolve(position);
        },
        reject,
        { ...this.options, ...options }
      );
    });
  }
 
  startWatching(options = {}) {
    if (this.watchId !== null) {
      this.stopWatching();
    }
 
    this.watchId = navigator.geolocation.watchPosition(
      (position) => {
        this.lastPosition = position;
        this.notifyListeners(position);
      },
      (error) => {
        this.notifyListeners(null, error);
      },
      { ...this.options, ...options }
    );
  }
 
  stopWatching() {
    if (this.watchId !== null) {
      navigator.geolocation.clearWatch(this.watchId);
      this.watchId = null;
    }
  }
 
  onPositionUpdate(callback) {
    this.listeners.add(callback);
    return () => this.listeners.delete(callback);
  }
 
  notifyListeners(position, error = null) {
    for (const listener of this.listeners) {
      listener(position, error);
    }
  }
 
  getLastKnown() {
    return this.lastPosition;
  }
 
  isWatching() {
    return this.watchId !== null;
  }
 
  async getCoordinates(options = {}) {
    const position = await this.getCurrentPosition(options);
    return {
      latitude: position.coords.latitude,
      longitude: position.coords.longitude,
      accuracy: position.coords.accuracy,
    };
  }
 
  destroy() {
    this.stopWatching();
    this.listeners.clear();
    this.lastPosition = null;
  }
}
 
// Usage
const location = new LocationService({ enableHighAccuracy: true });
 
const coords = await location.getCoordinates();
console.log(coords); // { latitude: 30.26, longitude: -97.74, accuracy: 15 }
 
// Continuous tracking
const unsub = location.onPositionUpdate((pos, err) => {
  if (err) {
    console.error("Location error:", err.message);
    return;
  }
  console.log(`Moved to: ${pos.coords.latitude}, ${pos.coords.longitude}`);
});
 
location.startWatching();
 
// Later
unsub();
location.destroy();