Geolocation API in React Components

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options) requests the device location once. The success callback receives a GeolocationPosition object. This is appropriate when you need the location once, such as finding the nearest store on button click, rather than tracking ongoing movement.

navigator.geolocation.watchPosition(successCallback, errorCallback, options) continuously fires the callback whenever the device position changes. It returns a numeric watchId. This is suitable for real-time use cases like delivery tracking or turn-by-turn navigation where the position must stay current.

The GeolocationPosition object contains a coords property with latitude, longitude, and accuracy (in meters). Additional optional fields include altitude, altitudeAccuracy, heading, and speed. The timestamp field records when the position was captured.

The error callback receives a GeolocationPositionError with a numeric code property. Code 1 is PERMISSION_DENIED (user refused), code 2 is POSITION_UNAVAILABLE (hardware or network failure), and code 3 is TIMEOUT (the request took too long). Always handle all three cases.

A watchPosition listener runs indefinitely until you stop it. In useEffect, return a cleanup function that calls navigator.geolocation.clearWatch(watchId). If you forget the cleanup, the watcher continues running after the component unmounts, draining the battery and potentially updating unmounted state.

A useGeolocation hook manages a status state with four possible values: idle (not yet requested), loading (request in progress), success (position received), and error (failed). It also holds the position and errorMessage in state. Components receive a clean, consistent interface.

When the user denies geolocation, show a helpful message explaining why the feature needs location access and how to re-enable it in browser settings. Never show a raw error code to users. Offer a manual address entry fallback so the feature remains usable without location permission.

Like most powerful browser APIs, geolocation is restricted to secure contexts. navigator.geolocation is undefined on plain HTTP pages. During development on localhost, it works without HTTPS. In production, always ensure your app is served over HTTPS or users will never be prompted for permission.

The optional third argument to getCurrentPosition and watchPosition accepts an options object. enableHighAccuracy: true requests GPS-level precision at the cost of more power. timeout sets the maximum milliseconds to wait. maximumAge allows a cached position if it was captured within the specified milliseconds.

Geolocation enables features like "find a store near me", delivery driver tracking on a map, weather based on current city, location-tagged posts, and distance calculations between the user and a destination. Always communicate clearly to users why the app needs their location before requesting permission.

Chrome DevTools allows you to set a fake device location. Open DevTools, go to the three-dot menu, select More tools, then Sensors. You can type in latitude and longitude coordinates to simulate any location. This is far faster than physically traveling to test location-dependent features.

What does a GeolocationPositionError code of 1 mean?

Use getCurrentPosition for a one-time read and watchPosition for continuous tracking. Always call clearWatch in the useEffect cleanup. Build a useGeolocation hook with idle, loading, success, and error states. Handle permission denial gracefully and remember that geolocation requires HTTPS in production.