#HTML5 Geolocation

The HTML5 Geolocation API allows web applications to obtain the geographic location information of the user's device with user consent. This enables the development of Location-Based Services (LBS), such as:

• Marking the user's current location on a map
• Providing localized search results
• "Nearby people" functionality

Privacy Note: Geolocation is a feature that involves user privacy. Therefore, the browser must pop up a window requesting explicit user authorization before any attempt to obtain user location information.

#Getting the Current Position

The core method for getting user location is navigator.geolocation.getCurrentPosition().

This method asynchronously attempts to obtain the device's position and accepts three parameters:

• successCallback: The callback function called when location is successfully obtained. This function receives a Position object as a parameter containing location information.
• errorCallback (optional): The callback function called when location retrieval fails. This function receives a PositionError object.
• options (optional): A configuration object for setting location retrieval parameters like accuracy, timeout, etc.

#Example Code

<button onclick="getLocation()">Get My Location</button>
<p id="demo"></p>

<script>
var x = document.getElementById("demo");

function getLocation() {
  // Check if the browser supports geolocation
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
    x.innerHTML = "Your browser does not support geolocation.";
  }
}

// Callback function for successful location retrieval
function showPosition(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;
}

// Callback function for failed location retrieval
function showError(error) {
  switch(error.code) {
    case error.PERMISSION_DENIED:
      x.innerHTML = "User denied the geolocation request."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML = "Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML = "The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML = "An unknown error occurred."
      break;
  }
}
</script>

#The Position Object

When location is successfully obtained, successCallback receives a Position object whose coords property contains key location data:

• position.coords.latitude: Latitude (decimal degrees)
• position.coords.longitude: Longitude (decimal degrees)
• position.coords.accuracy: Position accuracy (meters)
• position.coords.altitude: Altitude (meters, if available)
• position.coords.speed: Speed (meters/second, if available)
• position.coords.heading: Direction (degrees, if available)

#The PositionError Object

When location retrieval fails, errorCallback receives a PositionError object whose code property helps determine the reason for failure:

• 1: PERMISSION_DENIED - User denied authorization.
• 2: POSITION_UNAVAILABLE - Cannot obtain current position (e.g., network issues or can't connect to GPS satellites).
• 3: TIMEOUT - Request timed out.

#Displaying Position on a Map

After obtaining latitude and longitude, the most common application is to display it on a map. You can use various map service providers' APIs (like Google Maps, OpenStreetMap, etc.) to achieve this.

Here's a simple example link using Google Maps:

function showPosition(position) {
  var lat = position.coords.latitude;
  var lon = position.coords.longitude;
  var mapUrl = `https://maps.google.com/maps?q=${lat},${lon}`;
  window.open(mapUrl, '_blank');
}