Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
The Geolocation API provides access to geographical location data from the device. It can use GPS, WiFi, cellular networks, or IP address to determine location.
User must explicitly allow access
GPS, WiFi, cellular, IP address
Optional high-accuracy mode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geolocation API</title>
</head>
<body>
<div class="container">
<h1>đ Geolocation API</h1>
<p class="subtitle">Get your current location (browser will ask for permission)</p>
<button id="getLocationBtn">đ Get My Location</button>
<div class="result-box" id="resultBox">
<div class="result-title">Your Coordinates</div>
<p style="color: #6b7280; text-align: center; padding: 20px;">Click the button above to get your location</p>
</div>
<div class="info-box">
<strong>đ Privacy:</strong> The browser will ask for your permission before accessing your location. This is a security feature to protect your privacy.
</div>
</div>
</body>
</html>Loading preview...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Watch Position</title>
</head>
<body>
<div class="container">
<h1>đ°ī¸ Watch Position</h1>
<p class="subtitle">Continuously track your location as you move</p>
<span class="status-badge status-stopped" id="statusBadge">â Stopped</span>
<div class="controls">
<button class="btn-start" id="startBtn">âļī¸ Start Watching</button>
<button class="btn-stop" id="stopBtn" disabled>âšī¸ Stop Watching</button>
</div>
<div class="track-log" id="trackLog">
<p style="color: #6b7280; text-align: center; padding: 20px;">Click "Start Watching" to begin tracking</p>
</div>
</div>
</body>
</html>Loading preview...
getCurrentPosition()Get location once
watchPosition()Track location continuously
clearWatch()Stop watching location