What Is the Geolocation API and How Do You Use It?

What Is the Geolocation API?

The Geolocation API is a browser feature that allows websites to request a user's location. When you visit a weather site and it says "Show weather for your location," that's the Geolocation API at work.

The API returns latitude, longitude, and optionally altitude and accuracy. Websites use this to provide location-based services: maps, local business results, weather, store locators, etc.

How Does Geolocation Work?

Data Sources

The browser doesn't use satellites. Instead, it gathers location from multiple sources:

GPS (if available): Most accurate, but only on mobile devices. Takes 30+ seconds to lock.
Cell tower data: Triangulation from nearby towers. Accuracy varies (100m to several km).
Wi-Fi networks: Comparing known Wi-Fi networks and their signal strengths. Usually accurate within 100m.
IP address: Identifies region but not precise location (city level, not street level).

Accuracy

Expected accuracy varies:

Location Method	Accuracy	Speed	Devices
GPS	5-10 meters	30-60 seconds	Mobile with GPS
Wi-Fi Networks	100 meters	Instant	Mobile and Desktop
Cell Towers	100-1000 meters	Instant	Mobile
IP Address	City level	Instant	All devices

Using the Geolocation API in JavaScript

Basic Request

navigator.geolocation.getCurrentPosition(
  function(position) {
    const lat = position.coords.latitude;
    const lon = position.coords.longitude;
    console.log("Location: " + lat + ", " + lon);
  },
  function(error) {
    console.log("Error: " + error.message);
  }
);

Watch Position (Continuous Updates)

Track user movement in real-time:

const watchId = navigator.geolocation.watchPosition(
  function(position) {
    console.log("New position: " + position.coords.latitude);
  }
);

// Stop watching later
navigator.geolocation.clearWatch(watchId);

With Options

navigator.geolocation.getCurrentPosition(
  success,
  error,
  {
    enableHighAccuracy: true,  // Use GPS if available
    timeout: 10000,             // Wait up to 10 seconds
    maximumAge: 0               // Don't use cached position
  }
);

Permission Handling

User Permission is Required

Websites cannot access location silently. When you call geolocation, the browser shows a permission prompt. Users can click "Allow" or "Deny."

Privacy Note: Users should always have the choice. Requesting location unnecessarily annoys users. Only ask when it's essential to your service.

Handling Permission Denial

navigator.geolocation.getCurrentPosition(
  success,
  function(error) {
    if (error.code === error.PERMISSION_DENIED) {
      console.log("User denied location permission");
    }
  }
);

What Data Does Geolocation Return?

The Position Object

Property	Type	Description
latitude	Number	Latitude in degrees (-90 to 90)
longitude	Number	Longitude in degrees (-180 to 180)
altitude	Number	Height above sea level in meters (can be null)
accuracy	Number	Estimated accuracy in meters (how accurate is the lat/lon)
altitudeAccuracy	Number	Estimated altitude accuracy in meters (can be null)
heading	Number	Direction of travel in degrees (0-360, null if stationary)
speed	Number	Velocity in meters per second (null if stationary)
timestamp	Number	When this position was captured (milliseconds since epoch)

Browser Support

The Geolocation API is supported in all modern browsers (Chrome, Firefox, Safari, Edge). Internet Explorer does not support it.

On mobile, permission prompts appear at the top of the browser. On desktop, prompts usually appear in the address bar or as a dropdown.

Privacy and Security Considerations

HTTPS Required

Most browsers require HTTPS for geolocation. HTTP sites cannot access it (with exceptions for localhost during development).

User Control

Users can change permissions in browser settings anytime. They can deny specific sites or disable geolocation globally.

No Tracking Without Consent

Once a user denies permission, you can't silently access it in the background. Every request shows the permission prompt again.

Data Storage

The geolocation data is on the client side. Send it to your server only if needed. Treat location data as sensitive personal information.

Common Use Cases

Weather App

Request location on load, then show weather for that location.

Store Locator

Find nearby stores and show distance/directions.

Ride-sharing

Track user's current location to connect with drivers.

Delivery Tracking

Show estimated time to arrival based on user's location and traffic.

Social Check-ins

Allow users to check in at places and share location with friends.

Testing Geolocation

You can test geolocation functionality using:

Browser DevTools: Chrome and Firefox allow simulating different locations.
Real devices: Most accurate. Use actual mobile phones for testing.
Geolocation test tools: Tools like EazyStudio's Geo Location Tool let you input coordinates and test how your site responds.

Error Handling

navigator.geolocation.getCurrentPosition(
  success,
  function(error) {
    switch(error.code) {
      case error.PERMISSION_DENIED:
        console.log("Permission denied");
        break;
      case error.POSITION_UNAVAILABLE:
        console.log("Position unavailable");
        break;
      case error.TIMEOUT:
        console.log("Request timed out");
        break;
    }
  }
);

Best Practices

Only ask when necessary: Don't request location on page load for every site.
Show why you need it: Tell users why you're requesting location. "Show me nearby stores" is better than just asking.
Handle errors gracefully: Always provide fallback behavior if geolocation fails.
Cache when appropriate: Don't request location every few seconds. Store and reuse for some time.
Respect user privacy: Don't sell or share location data without explicit consent.
Use HTTPS: Always use HTTPS in production.

Summary

The Geolocation API lets websites request user location using GPS, Wi-Fi, cell towers, or IP address. It requires explicit user permission and HTTPS. Use it to provide location-based services like weather, store locators, or ride-sharing. Always handle permissions, errors, and privacy carefully.

Try Geo Location Tool — Free

No account, no upload to server. Runs entirely in your browser.

Open Geo Location Tool

What Is the Geolocation API and How Do You Use It?