How to Get User Location with the HTML5 Geolocation API? (Code Included)

The HTML5 Geolocation API requires user authorization to obtain the user's latitude and longitude, supports modern browsers and does not require a third-party library; calling getCurrentPosition to request the location, watchPosition for real-time tracking, requires HTTPS, error handling and reasonable option configuration.

The HTML5 Geolocation API lets you get the user's current geographic position—latitude and longitude—with just a few lines of JavaScript. It requires user permission, works in most modern browsers, and doesn't need external libraries.

How to Request Location Permission and Get Coordinates

Call navigator.geolocation.getCurrentPosition() to prompt the user for location access and retrieve their position. You must provide at least a success callback; an error callback is highly recommended.

Here's a minimal working example:

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      const lat = position.coords.latitude;
      const lng = position.coords.longitude;
      console.log(`Lat: ${lat}, Lng: ${lng}`);
    },
    (error) => {
      console.error("Geolocation error:", error.message);
    }
  );
} else {
  console.log("Geolocation is not supported in this browser.");
}

Handling Common Geolocation Errors

Users may deny permission, or location services might be unavailable. The error object passed to the failure callback has a code property with these values:

• 1 — PERMISSION_DENIED : User clicked “Block” or denied access in browser settings
• 2 — POSITION_UNAVAILABLE : Device couldn't determine location (eg, GPS off, no network)
• 3 — TIMEOUT : Request took too long (default timeout is ~Infinity, but you can set it)

Add a timeout and maximumAge option to improve reliability:

navigator.geolocation.getCurrentPosition(
  successCallback,
  errorCallback,
  {
    timeout: 10000, // 10 seconds
    maximumAge: 60000, // accept cached position up to 1 minute old
    enableHighAccuracy: true // use GPS if available (slower, uses more battery)
  }
);

Watching Position Changes in Real Time

Use navigator.geolocation.watchPosition() to track movement—ideal for maps or navigation apps. It returns a watch ID you can use to stop watching later.

• Triggers the success callback every time the position changes significantly
• Call navigator.geolocation.clearWatch(watchId) to stop listening
• Same error handling as getCurrentPosition

const watchId = navigator.geolocation.watchPosition(
  (position) => {
    console.log(`Updated: ${position.coords.latitude}, ${position.coords.longitude}`);
  },
  (error) => {
    console.error(error.message);
  }
);

// Later, to stop:
// navigator.geolocation.clearWatch(watchId);

Important Notes and Best Practices

Geolocation only works over HTTPS (or localhost for development). Browsers block it on insecure HTTP pages.

• Always check navigator.geolocation before calling methods
• Explain why your app needs location—users are more likely to allow it when they understand the benefit
• Provide fallback behavior (eg, manual address input) if location fails
• Avoid enabling enableHighAccuracy unless necessary—it increases battery use and may delay results

That's all you need to start using geolocation reliably in your web app.

The above is the detailed content of How to Get User Location with the HTML5 Geolocation API? (Code Included). For more information, please follow other related articles on the PHP Chinese website!