Melacak Lokasi Menggunakan HTML dan Javascript Banyak orang yang pengen tahu bagaimana melacak lokasi seseorang dengan bahasa pemrograman yang mudah dipahami dan dimengerti untuk orang awam. Untuk melacak lokasi seseorang menggunakan HTML dan JavaScript, kita bisa memanfaatkan Geolocation API bawaan browser. Namun, perlu diperhatikan bahwa metode ini memerlukan izin dari pengguna untuk mengakses lokasi mereka. Selain itu, pengguna juga harus menggunakan perangkat dengan GPS atau koneksi jaringan yang mendukung.
Kali ini mampirklik.com akan memberikan contoh bahasa pemrograman untuk melacak lokasi menggunakan HTML dan Javascript dan berikut source code yang bisa digunakan:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pelacak Lokasi</title>
</head>
<body>
<h1>Pelacak Lokasi</h1>
<button id="getLocation">Dapatkan Lokasi</button>
<p id="status"></p>
<p><strong>Latitude:</strong> <span id="latitude"></span></p>
<p><strong>Longitude:</strong> <span id="longitude"></span></p>
<script>
document.getElementById("getLocation").addEventListener("click", function () {
if ("geolocation" in navigator) {
// Meminta izin untuk mengakses lokasi
navigator.geolocation.getCurrentPosition(
function (position) {
// Menampilkan lokasi pengguna
document.getElementById("status").textContent = "Lokasi ditemukan!";
document.getElementById("latitude").textContent = position.coords.latitude;
document.getElementById("longitude").textContent = position.coords.longitude;
},
function (error) {
// Menangani kesalahan
switch (error.code) {
case error.PERMISSION_DENIED:
document.getElementById("status").textContent = "Izin lokasi ditolak.";
break;
case error.POSITION_UNAVAILABLE:
document.getElementById("status").textContent = "Lokasi tidak tersedia.";
break;
case error.TIMEOUT:
document.getElementById("status").textContent = "Permintaan lokasi waktu habis.";
break;
default:
document.getElementById("status").textContent = "Terjadi kesalahan.";
}
}
);
} else {
document.getElementById("status").textContent = "Geolocation tidak didukung oleh browser ini.";
}
});
</script>
</body>
</html>
Untuk penjelasan dari kode diatas berikut:
HTML: Tombol Dapatkan Lokasi digunakan untuk memicu permintaan lokasi. Elemen <p> digunakan untuk menampilkan status dan koordinat lokasi (latitude & longitude). JavaScript: navigator.geolocation.getCurrentPosition: Meminta lokasi pengguna. Callback: position: Jika berhasil, objek ini berisi informasi lokasi, seperti latitude dan longitude. error: Jika gagal, memberikan informasi tentang penyebab kegagalan. Error Handling: Menangani berbagai kemungkinan kesalahan, seperti izin ditolak atau lokasi tidak tersedia.
Menampilkan Lokasi di Peta Jika ingin menampilkan lokasi pada peta, gunakan layanan seperti Google Maps atau Leaflet.js . Contoh integrasi dengan Google Maps:
<p><a id="mapLink" target="_blank">Lihat di Google Maps</a></p>
<script>
function showOnMap(lat, lng) {
const mapLink = document.getElementById("mapLink");
mapLink.href = `https://www.google.com/maps?q=${lat},${lng}`;
mapLink.textContent = "Lihat lokasi di Google Maps";
}
navigator.geolocation.getCurrentPosition((position) => {
const lat = position.coords.latitude;
const lng = position.coords.longitude;
showOnMap(lat, lng);
});
</script>
VIDEO
Semoga bisa bermanfaat dan beguna baik untuk pembelajaran ataupun tugas skripsi.
