HTML Geolocation API Tutorial for Beginners – Simple Explanation

The Geolocation API lets you get the user’s current location. This is how websites show nearby restaurants, weather in your area, or directions from your current position.

Privacy Note: The browser will ALWAYS ask for permission before sharing location. Your privacy is protected. The location is only available if the user clicks “Allow”.

Tip: The Geolocation API works best on devices with GPS, like smartphones and smartwatches. On desktop computers, it uses Wi-Fi and IP address, which is less accurate. It also requires a secure connection (HTTPS).

Browser Support

The Geolocation API is supported in all modern browsers:

Feature	Chrome	Edge	Firefox	Safari	Opera
Geolocation API	5.0	12.0	3.5	5.0	10.6

Using the Geolocation API

The Geolocation API is accessed through navigator.geolocation. Here is a simple example that gets your current latitude and longitude:

When you click the button, the browser will ask for permission. If you allow it, your latitude and longitude will appear.

How It Works – Step by Step

Check if Geolocation is supported – The code checks if navigator.geolocation exists.
Ask for permission – The browser automatically shows a permission request.
Get the position – If allowed, getCurrentPosition() gets the location.
Success or error – If successful, the position is displayed. If an error occurs, an error message is shown.

Error Handling (Specific Errors)

Sometimes getting the location fails. The user might deny permission, the GPS signal might be weak, or the request might time out. You can handle different errors with specific messages:

<!DOCTYPE html>
<html>
<body>

<h3>Get Location with Detailed Errors</h3>

<button onclick="demoGetLocationDetailed()">Get Location</button>
<p id="demoLocationDetailed"></p>

function demoGetLocationDetailed() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(demoShowPositionDetailed, demoHandleError);
  } else {
    outputDetailed.innerHTML = "Geolocation is not supported by your browser.";
  }
}

function demoShowPositionDetailed(position) {
  outputDetailed.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;
}

function demoHandleError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      outputDetailed.innerHTML = "You denied the request for location.";
      break;
    case error.POSITION_UNAVAILABLE:
      outputDetailed.innerHTML = "Location information is unavailable.";
      break;
    case error.TIMEOUT:
      outputDetailed.innerHTML = "The request to get location timed out.";
      break;
    case error.UNKNOWN_ERROR:
      outputDetailed.innerHTML = "An unknown error occurred.";
      break;
  }
}
</script>

</body>
</html>

This example tells you exactly why the location could not be retrieved:

Permission denied – The user clicked “Block”
Position unavailable – GPS signal is weak or not available
Timeout – The request took too long
Unknown error – Something else went wrong

What Information Can You Get?

The getCurrentPosition() method returns an object with several properties. Some are always available, others depend on the device:

Property	Description	Always Available?
`coords.latitude`	The latitude as a decimal number	✅ Yes
`coords.longitude`	The longitude as a decimal number	✅ Yes
`coords.accuracy`	Accuracy of the position (in meters)	✅ Yes
`coords.altitude`	Altitude in meters above sea level	📱 GPS devices only
`coords.altitudeAccuracy`	Altitude accuracy (in meters)	📱 GPS devices only
`coords.heading`	Direction (degrees from North)	📱 GPS devices only
`coords.speed`	Speed in meters per second	📱 GPS devices only
`timestamp`	Date and time of the response	✅ Yes

Real-Time Location Tracking (watchPosition)

The watchPosition() method continuously tracks the user’s location as they move. This is useful for GPS navigation or fitness tracking apps.

<!DOCTYPE html>
<html>
<body>

<h3>Real-Time Location Tracking</h3>

<button onclick="demoStartTracking()">Start Tracking</button>
<button onclick="demoStopTracking()">Stop Tracking</button>
<p id="demoTrackingOutput"></p>

function demoStopTracking() {
  if (watchId !== null) {
    navigator.geolocation.clearWatch(watchId);
    trackingOutput.innerHTML = "Tracking stopped.";
    watchId = null;
  }
}

function demoShowTracking(position) {
  trackingOutput.innerHTML = "Lat: " + position.coords.latitude + 
  "<br>Lon: " + position.coords.longitude +
  "<br>Accuracy: " + position.coords.accuracy + " meters" +
  "<br>Time: " + new Date(position.timestamp).toLocaleTimeString();
}

function demoTrackingError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      trackingOutput.innerHTML = "You denied the request for location.";
      break;
    case error.POSITION_UNAVAILABLE:
      trackingOutput.innerHTML = "Location information is unavailable.";
      break;
    case error.TIMEOUT:
      trackingOutput.innerHTML = "The request timed out.";
      break;
    default:
      trackingOutput.innerHTML = "An unknown error occurred.";
      break;
  }
}
</script>

</body>
</html>

The watchPosition() method keeps updating the location. Use clearWatch() to stop tracking when you no longer need it.

Real-World Uses for Geolocation

Weather websites – Show local weather automatically
Restaurant finders – Find places to eat near you
Maps and navigation – Show directions from your current location
Delivery tracking – Track food or package delivery in real time
Social media check-ins – Share your location on ModafVibe, Facebook, or Instagram
Fitness apps – Track running or cycling routes

Quick Summary

Use navigator.geolocation to access the Geolocation API.
The browser always asks for permission first.
getCurrentPosition() gets the location once.
watchPosition() continuously tracks location as it changes.
clearWatch() stops the tracking.
Always handle errors (permission denied, timeout, position unavailable).
Latitude and longitude are always returned. Accuracy, altitude, speed, and heading depend on the device.

What Just Happened? Let Me Explain

Geolocation requires user permission for privacy. You cannot get someone’s location without asking.
The API works best on smartphones with GPS. Desktop computers use Wi-Fi and IP address, which are less accurate.
Always include error handling. Users might deny permission, or the GPS signal might be weak.
If you only need the location once, use getCurrentPosition(). If you need continuous updates (like a navigation app), use watchPosition().
Remember to call clearWatch() when you no longer need tracking to save battery.

Tip: Test your geolocation code on a smartphone if possible. Desktop browsers often show less accurate positions. Some browsers also require HTTPS for the Geolocation API to work.

Geolocation API Reference

Method / Property	Description
`navigator.geolocation`	The main geolocation object
`getCurrentPosition(success, error, options)`	Gets the current location once
`watchPosition(success, error, options)`	Continuously tracks location
`clearWatch(watchId)`	Stops the watchPosition tracking
`coords.latitude`	Latitude in decimal degrees
`coords.longitude`	Longitude in decimal degrees
`coords.accuracy`	Accuracy in meters
`coords.altitude`	Altitude in meters (GPS only)
`coords.speed`	Speed in meters per second (GPS only)
`coords.heading`	Direction in degrees (GPS only)
`timestamp`	Time when the position was retrieved