• Hajipur, Bihar, 844101

☰
❮
❯

HTML

HTML5 Basics

HTML Styling and Design

HTML Links and Media

HTML Layout and Structure

HTML Forms

HTML Graphics

HTML APIs

HTML Advanced Topics

HTML Geolocation

← Previous Next →

The HTML Geolocation API allows web applications to access the geographical location of a user's device. It can retrieve:

  • Latitude

  • Longitude

  • Accuracy

  • Altitude (if available)

  • Speed and direction (if available)

⚠️ Note: This feature works only in secure contexts (HTTPS), and the user must grant permission.

🔹 Basic Syntax

navigator.geolocation.getCurrentPosition(successCallback, errorCallback);

🔹 Example: Get Current Position

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

<script>
function getLocation() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition, showError);
  } else {
    document.getElementById("output").innerText = "Geolocation is not supported.";
  }
}

function showPosition(position) {
  document.getElementById("output").innerText =
    "Latitude: " + position.coords.latitude +
    ", Longitude: " + position.coords.longitude;
}

function showError(error) {
  switch (error.code) {
    case error.PERMISSION_DENIED:
      alert("User denied the request.");
      break;
    case error.POSITION_UNAVAILABLE:
      alert("Location unavailable.");
      break;
    case error.TIMEOUT:
      alert("Request timed out.");
      break;
    case error.UNKNOWN_ERROR:
      alert("An unknown error occurred.");
      break;
  }
}
</script>

🔹 Geolocation Methods

Method Description
getCurrentPosition() Gets the current location once
watchPosition() Monitors and returns location continuously
clearWatch(id) Stops monitoring the position

Practice Questions

Q1. Use navigator.geolocation.getCurrentPosition() to show latitude and longitude.

Q2. Add a button that fetches location on click.

Q3. Display an error message if the user denies location permission.

Q4. Use watchPosition() to track real-time movement.

Q5. Display a live Google Maps link using the coordinates.

Q6. Show coordinates only when accessed over HTTPS.

Q7. Log errors for debugging using showError() function.

Q8. Update a <div> with coordinates every 5 seconds using watchPosition.

Q9. Create a fallback message for unsupported browsers.

Q10. Use clearWatch() to stop location tracking with a "Stop" button.

HTML Geolocation Quiz

Q1: Which method gets the user’s location once?

A. getLocation()
B. watchPosition()
C. getCurrentPosition()
D. getCoords()

Q2: What must the user do before location data is accessed?

A. Nothing
B. Enable Bluetooth
C. Grant permission
D. Accept cookies

Q3: Which of the following is NOT part of the position.coords object?

A. latitude
B. longitude
C. height
D. accuracy

Q4: What is required for Geolocation to work?

A. Java Applet
B. VPN
C. HTTPS
D. PHP script

Q5: What method continuously tracks position?

A. trackPosition()
B. getCurrentPosition()
C. watchPosition()
D. updateCoords()

Q6: Which error code means the user denied permission?

A. 1
B. 0
C. 4
D. 2

Q7: What does clearWatch() do?

A. Clears the output box
B. Stops watching position
C. Reloads location
D. Grants location permission

Q8: Where is the Geolocation API accessed from?

A. window.location
B. document.navigator
C. navigator.geolocation
D. location.api

Q9: Which one is a valid error callback for Geolocation?

A. onError()
B. errorCallback()
C. showError()
D. All of the above

Q10: Geolocation API is part of:

A. HTML tags
B. CSS3
C. JavaScript Web APIs
D. SQL
← Previous Next →
Login
Go Back Top