⚙️ Module 13 · HTML5 APIs🔴 AdvancedLESSON 45

Geolocation API

⏱️ 14 min read

📖 Theory + Code

🧩 5 Quiz Questions

🏗️ 1 Challenge

Course progress37%

🎯 What you'll learn: Requesting a user's location with navigator.geolocation.getCurrentPosition(), handling coordinates, and permission behavior.

Section 1

Requesting a Position

The Geolocation API is a JavaScript API (not an HTML tag) accessed via navigator.geolocation. Calling getCurrentPosition() always triggers a browser permission prompt — it never runs silently.

geolocation-basic.html

HTML

<script>
navigator.geolocation.getCurrentPosition(
  position => {
    console.log(position.coords.latitude, position.coords.longitude);
  },
  error => {
    console.error('Location denied or unavailable:', error.message);
  }
);
</script>

⚠️

Requires HTTPS in modern browsers

Geolocation is a "powerful feature" restricted to secure contexts — it silently fails on plain http:// pages (except localhost during development).

Section 2

Handling Permission & Errors

Users can allow, deny, or ignore the permission prompt. Your error callback should handle all three realistic outcomes: permission denied, position unavailable, and timeout.

error.code	Meaning
1 — PERMISSION_DENIED	User declined the location prompt
2 — POSITION_UNAVAILABLE	Location info couldn't be determined
3 — TIMEOUT	Request took too long

Section 3

Using Coordinates With a Map

Once you have latitude/longitude, the typical next step is feeding them into a mapping service or an <iframe> embed to visually show the location.

geolocation-map.html

HTML

<script>
navigator.geolocation.getCurrentPosition(pos => {
  const { latitude, longitude } = pos.coords;
  document.getElementById('mapFrame').src =
    `https://maps.google.com/maps?q=${latitude},${longitude}&z=15&output=embed`;
});
</script>
<iframe id="mapFrame" width="100%" height="300"></iframe>

💡

Always explain why you need location first

Users are far more likely to accept the permission prompt if your UI explains the reason before triggering it — "Find tutors near you" beats a silent request.

🧩 Knowledge Check — Lesson 45

5 questions to test your understanding.

1. What triggers the browser's location permission prompt?

2. What connection type does geolocation require in modern browsers?

3. What error code means the user declined the location prompt?

4. Where do you find the coordinates in the success callback?

5. Why explain your reason for needing location before requesting it?

💪

Coding Challenge — Lesson 45

Apply what you learned · Advanced Level

Challenge: Build a "Find My Location" Button

Build a button that, when clicked, calls getCurrentPosition() and displays the latitude/longitude in a paragraph, with an error message shown if permission is denied.

💡 Show hints if you're stuck

Trigger the request from a button click, not automatically on load.

Finished this lesson?

Mark it complete to track your progress.

Lesson 45 of 62Module 13 — HTML5 APIs

Geolocation API

Requesting a Position

Handling Permission & Errors

Using Coordinates With a Map

Lesson 45 Complete!