HTML Geolocation API Tutorial

Learn how to access a user's geographical location using the browser's Geolocation API

Introduction to Geolocation

The Geolocation API allows web applications to access the geographical location of the user (with their permission). This can be used to provide location-aware content, maps, and more.

Basic Geolocation Example:

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition((position) => {
    console.log("Latitude:", position.coords.latitude);
    console.log("Longitude:", position.coords.longitude);
  });
} else {
  console.log("Geolocation is not supported by this browser.");
}if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition((position) => {
    console.log("Latitude:", position.coords.latitude);
    console.log("Longitude:", position.coords.longitude);
  });
} else {
  console.log("Geolocation is not supported by this browser.");
}

Basic Geolocation Examples

1. Get Current Position

The most common use of the Geolocation API is to get the user's current position.

function showPosition(position) {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;
  
  console.log(`Your position: ${latitude}, ${longitude}`);
  
  // Display on a map or use in your application
  document.getElementById("location").innerHTML = `
    <p>Latitude: ${latitude}</p>
    <p>Longitude: ${longitude}</p>
    <p>Accuracy: ${position.coords.accuracy} meters</p>
  `;
}

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      showPosition,
      (error) => {
        console.error("Error getting location:", error.message);
        alert("Error getting location: " + error.message);
      }
    );
  } else {
    alert("Geolocation is not supported by this browser.");
  }
}function showPosition(position) {
  const latitude = position.coords.latitude;
  const longitude = position.coords.longitude;
  
  console.log(`Your position: ${latitude}, ${longitude}`);
  
  // Display on a map or use in your application
  document.getElementById("location").innerHTML = `
    <p>Latitude: ${latitude}</p>
    <p>Longitude: ${longitude}</p>
    <p>Accuracy: ${position.coords.accuracy} meters</p>
  `;
}

function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      showPosition,
      (error) => {
        console.error("Error getting location:", error.message);
        alert("Error getting location: " + error.message);
      }
    );
  } else {
    alert("Geolocation is not supported by this browser.");
  }
}

2. Watch Position

Use watchPosition() to continuously track the user's position as they move.

let watchId = null;

function startTracking() {
  if (navigator.geolocation) {
    watchId = navigator.geolocation.watchPosition(
      (position) => {
        const latitude = position.coords.latitude;
        const longitude = position.coords.longitude;
        
        document.getElementById("tracking").innerHTML = `
          <p>Current position:</p>
          <p>Latitude: ${latitude}</p>
          <p>Longitude: ${longitude}</p>
          <p>Speed: ${position.coords.speed || 0} m/s</p>
          <p>Heading: ${position.coords.heading || 0}° from north</p>
        `;
      },
      (error) => {
        console.error("Error watching position:", error.message);
      },
      {
        enableHighAccuracy: true,
        maximumAge: 30000,
        timeout: 27000
      }
    );
  } else {
    alert("Geolocation is not supported by this browser.");
  }
}

function stopTracking() {
  if (watchId !== null) {
    navigator.geolocation.clearWatch(watchId);
    watchId = null;
    document.getElementById("tracking").innerHTML = "Tracking stopped.";
  }
}let watchId = null;

function startTracking() {
  if (navigator.geolocation) {
    watchId = navigator.geolocation.watchPosition(
      (position) => {
        const latitude = position.coords.latitude;
        const longitude = position.coords.longitude;
        
        document.getElementById("tracking").innerHTML = `
          <p>Current position:</p>
          <p>Latitude: ${latitude}</p>
          <p>Longitude: ${longitude}</p>
          <p>Speed: ${position.coords.speed || 0} m/s</p>
          <p>Heading: ${position.coords.heading || 0}° from north</p>
        `;
      },
      (error) => {
        console.error("Error watching position:", error.message);
      },
      {
        enableHighAccuracy: true,
        maximumAge: 30000,
        timeout: 27000
      }
    );
  } else {
    alert("Geolocation is not supported by this browser.");
  }
}

function stopTracking() {
  if (watchId !== null) {
    navigator.geolocation.clearWatch(watchId);
    watchId = null;
    document.getElementById("tracking").innerHTML = "Tracking stopped.";
  }
}

3. Error Handling

Proper error handling is essential for a good user experience with geolocation.

function handleLocationError(error) {
  let errorMessage = "Unknown error occurred";
  
  switch(error.code) {
    case error.PERMISSION_DENIED:
      errorMessage = "User denied the request for Geolocation.";
      break;
    case error.POSITION_UNAVAILABLE:
      errorMessage = "Location information is unavailable.";
      break;
    case error.TIMEOUT:
      errorMessage = "The request to get user location timed out.";
      break;
    case error.UNKNOWN_ERROR:
      errorMessage = "An unknown error occurred.";
      break;
  }
  
  document.getElementById("error").innerHTML = errorMessage;
  console.error("Geolocation error:", errorMessage);
}

function getLocationWithErrorHandling() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        document.getElementById("location").innerHTML = `
          Latitude: ${position.coords.latitude}<br>
          Longitude: ${position.coords.longitude}
        `;
      },
      handleLocationError,
      {
        timeout: 10000,
        maximumAge: 0,
        enableHighAccuracy: true
      }
    );
  } else {
    document.getElementById("error").innerHTML = 
      "Geolocation is not supported by this browser.";
  }
}function handleLocationError(error) {
  let errorMessage = "Unknown error occurred";
  
  switch(error.code) {
    case error.PERMISSION_DENIED:
      errorMessage = "User denied the request for Geolocation.";
      break;
    case error.POSITION_UNAVAILABLE:
      errorMessage = "Location information is unavailable.";
      break;
    case error.TIMEOUT:
      errorMessage = "The request to get user location timed out.";
      break;
    case error.UNKNOWN_ERROR:
      errorMessage = "An unknown error occurred.";
      break;
  }
  
  document.getElementById("error").innerHTML = errorMessage;
  console.error("Geolocation error:", errorMessage);
}

function getLocationWithErrorHandling() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        document.getElementById("location").innerHTML = `
          Latitude: ${position.coords.latitude}<br>
          Longitude: ${position.coords.longitude}
        `;
      },
      handleLocationError,
      {
        timeout: 10000,
        maximumAge: 0,
        enableHighAccuracy: true
      }
    );
  } else {
    document.getElementById("error").innerHTML = 
      "Geolocation is not supported by this browser.";
  }
}

Advanced Geolocation Techniques

1. Geolocation with Maps

Combine the Geolocation API with mapping libraries like Google Maps or Leaflet.

function initMap() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const userLocation = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        
        // Create a map centered at the user's location
        const map = new google.maps.Map(document.getElementById("map"), {
          center: userLocation,
          zoom: 15
        });
        
        // Add a marker at the user's location
        new google.maps.Marker({
          position: userLocation,
          map: map,
          title: "Your Location"
        });
      },
      (error) => {
        console.error("Error getting location for map:", error);
        // Default to a known location if geolocation fails
        const defaultLocation = { lat: 40.7128, lng: -74.0060 }; // New York
        const map = new google.maps.Map(document.getElementById("map"), {
          center: defaultLocation,
          zoom: 10
        });
      }
    );
  } else {
    alert("Geolocation is not supported by this browser.");
  }
}

// Load the Google Maps API and then call initMap
function loadGoogleMaps() {
  const script = document.createElement("script");
  script.src = `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap`;
  script.defer = true;
  script.async = true;
  document.head.appendChild(script);
}function initMap() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const userLocation = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };
        
        // Create a map centered at the user's location
        const map = new google.maps.Map(document.getElementById("map"), {
          center: userLocation,
          zoom: 15
        });
        
        // Add a marker at the user's location
        new google.maps.Marker({
          position: userLocation,
          map: map,
          title: "Your Location"
        });
      },
      (error) => {
        console.error("Error getting location for map:", error);
        // Default to a known location if geolocation fails
        const defaultLocation = { lat: 40.7128, lng: -74.0060 }; // New York
        const map = new google.maps.Map(document.getElementById("map"), {
          center: defaultLocation,
          zoom: 10
        });
      }
    );
  } else {
    alert("Geolocation is not supported by this browser.");
  }
}

// Load the Google Maps API and then call initMap
function loadGoogleMaps() {
  const script = document.createElement("script");
  script.src = `https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap`;
  script.defer = true;
  script.async = true;
  document.head.appendChild(script);
}

2. Calculating Distance Between Points

Calculate the distance between two geographic points using the Haversine formula.

function calculateDistance(lat1, lon1, lat2, lon2) {
  const R = 6371; // Earth's radius in km
  const dLat = toRad(lat2 - lat1);
  const dLon = toRad(lon2 - lon1);
  
  const a = 
    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
    Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * 
    Math.sin(dLon / 2) * Math.sin(dLon / 2);
  
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  const distance = R * c; // Distance in km
  
  return distance;
}

function toRad(degrees) {
  return degrees * Math.PI / 180;
}

// Example usage:
function showDistanceToLocation(targetLat, targetLon) {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const distance = calculateDistance(
          position.coords.latitude,
          position.coords.longitude,
          targetLat,
          targetLon
        );
        
        document.getElementById("distance").innerHTML = `
          You are ${distance.toFixed(2)} km from the target location.
        `;
      },
      (error) => {
        console.error("Error getting location for distance calculation:", error);
      }
    );
  } else {
    alert("Geolocation is not supported by this browser.");
  }
}function calculateDistance(lat1, lon1, lat2, lon2) {
  const R = 6371; // Earth's radius in km
  const dLat = toRad(lat2 - lat1);
  const dLon = toRad(lon2 - lon1);
  
  const a = 
    Math.sin(dLat / 2) * Math.sin(dLat / 2) +
    Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * 
    Math.sin(dLon / 2) * Math.sin(dLon / 2);
  
  const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
  const distance = R * c; // Distance in km
  
  return distance;
}

function toRad(degrees) {
  return degrees * Math.PI / 180;
}

// Example usage:
function showDistanceToLocation(targetLat, targetLon) {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(
      (position) => {
        const distance = calculateDistance(
          position.coords.latitude,
          position.coords.longitude,
          targetLat,
          targetLon
        );
        
        document.getElementById("distance").innerHTML = `
          You are ${distance.toFixed(2)} km from the target location.
        `;
      },
      (error) => {
        console.error("Error getting location for distance calculation:", error);
      }
    );
  } else {
    alert("Geolocation is not supported by this browser.");
  }
}

3. Managing Permissions

Check and manage geolocation permissions for better user experience.

// Check if geolocation is supported and permissions
async function checkGeolocationPermission() {
  if (!navigator.geolocation) {
    return "unsupported";
  }
  
  // The Permissions API is not universally supported
  if (!navigator.permissions) {
    return "unknown";
  }
  
  try {
    const permissionStatus = await navigator.permissions.query({
      name: "geolocation"
    });
    
    return permissionStatus.state;
  } catch (error) {
    console.error("Error checking permission:", error);
    return "unknown";
  }
}

// Example usage
async function handleGeolocationRequest() {
  const permission = await checkGeolocationPermission();
  
  switch (permission) {
    case "granted":
      // Permission already granted, proceed with geolocation
      getLocation();
      break;
    case "prompt":
      // Will prompt the user when getCurrentPosition is called
      getLocation();
      break;
    case "denied":
      // Permission denied, show alternative content
      document.getElementById("message").innerHTML = 
        "Please enable geolocation permissions in your browser settings.";
      break;
    case "unsupported":
      document.getElementById("message").innerHTML = 
        "Geolocation is not supported by your browser.";
      break;
    default:
      // Unknown state, proceed but handle potential errors
      getLocation();
  }
}

function getLocation() {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      // Handle position
    },
    (error) => {
      // Handle error
    }
  );
}// Check if geolocation is supported and permissions
async function checkGeolocationPermission() {
  if (!navigator.geolocation) {
    return "unsupported";
  }
  
  // The Permissions API is not universally supported
  if (!navigator.permissions) {
    return "unknown";
  }
  
  try {
    const permissionStatus = await navigator.permissions.query({
      name: "geolocation"
    });
    
    return permissionStatus.state;
  } catch (error) {
    console.error("Error checking permission:", error);
    return "unknown";
  }
}

// Example usage
async function handleGeolocationRequest() {
  const permission = await checkGeolocationPermission();
  
  switch (permission) {
    case "granted":
      // Permission already granted, proceed with geolocation
      getLocation();
      break;
    case "prompt":
      // Will prompt the user when getCurrentPosition is called
      getLocation();
      break;
    case "denied":
      // Permission denied, show alternative content
      document.getElementById("message").innerHTML = 
        "Please enable geolocation permissions in your browser settings.";
      break;
    case "unsupported":
      document.getElementById("message").innerHTML = 
        "Geolocation is not supported by your browser.";
      break;
    default:
      // Unknown state, proceed but handle potential errors
      getLocation();
  }
}

function getLocation() {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      // Handle position
    },
    (error) => {
      // Handle error
    }
  );
}

Geolocation API Reference

Best Practices

1. Request Permission Appropriately

Only request geolocation access when the user expects it (e.g., after clicking a "Find Near Me" button). Don't request it on page load without context.

2. Provide Fallbacks

Always handle cases where geolocation is denied or unavailable. Provide manual location input options when possible.

3. Optimize for Accuracy vs Battery

Use enableHighAccuracy: true only when needed (e.g., for navigation). For general location purposes, the default is usually sufficient and better for battery life.

4. Handle Errors Gracefully

Provide clear error messages when location access fails and explain how the user can enable it if they want to.

5. Consider Privacy

Be transparent about how you'll use location data and consider implementing a privacy policy that addresses location tracking.

Conclusion

The Geolocation API is a powerful tool for creating location-aware web applications. With proper implementation and consideration for user privacy, you can create engaging experiences that respond to the user's physical location.

Try HTML Editor More HTML Tutorials

< Previous (Svg)Next (Drag-Drop) >