Pernah enggak sih kalian kepikiran cara ngambil location user di website kita itu gimana?, dan buat apa sih fitur itu, contohnya aja kalau di traveloka itu buat ngambil current location kita tanpa perlu memasukkannya secara manual, nah ternyata di js native cara nya simple loh cara ngambil latitude dan longitude dari user, tentunya harus dengan izin permission dari user dulu.
yuk simak tutorial singkatnya dibawah.
1. pertama2 siapin dulu strutur HTML sederhana seperti di bawah, di body buat h1 dan element span seperti contoh, nah nanti itu digunakan untuk menampilkan hasil latitude dan longitude menggunakan DOM.
<html>
<head>
<title>BASIC GEOLOCATION JS</title>
</head>
<body>
<h1>
<span class="lang"></span>, <span class="long"></span>
</h1>
</body>
</html>
2. di akhir sebelum penutup body kita buat tag script yang berisi pengecekan apakah browser kita mendukung geolocation menggunakan if, dan jika tidak mendukung kita tampilkan alert kepada user dengan pesan seperti dibawah.
<script>
if ('geolocation' in navigator) {
} else {
alert('browser anda tidak mendukung geolocation');
}
</script>
3. di dalam if jika berhasil kita akan menjalankan function getCurrentPosition dari navigator.geolocation, dengan parameter yang pertama adalah function jika berhasil mendapatkan location dan parameter yang kedua jika gagal/error dalam pengambilan location.
navigator.geolocation.getCurrentPosition(success, error);
4. kemudian kita buat dua function tadi yang digunakan sebagai parameter di getCurrentPosition, yaitu function success dan error, function success menerima parameter berupa position, nah position ini yang berisi beberapa informasi location dari user yang mengakses website kita seperti contohnya latitude dan longitude, kemudian kita ambil latitude dan longitude menggunakan destructure object seperti dibawah dari object position.coords,
langkah berikutnya kita masukkan isi dari latitude dan longitude ke element h1 span yag kita buat tadi menggunakan DOM, document.querySelector textContext nya kita isi sesuai latitude dan longitude yang kita ambil. kemudian untuk function yang kedua function error menerima parameter berupa err yang berisi pesan error, karna simple langsung aja kita tampilkan pesan error ke user menggunakan alert.
function success(position) {
const { latitude, longitude } = position.coords;
document.querySelector('.lang').textContent = `latitude : ${latitude}`;
document.querySelector('.long').textContent = `longitude : ${longitude}`;
}
function error(err) {
alert(err.message);
}
5. ok selesai temen2, gimana mudah kan menggunakan geolocation API untuk mendapatkan latitude dan longitude user, nah nanti hasil dari latitude dan longitude yang udah kalian dapatkan itu bisa kalian gunakan di map seperti google map, laflet dan penyedia map lainnya, buat full code nya bisa kalian lihat Disini
Sekarang teman2 bisa coba jalankan scriptnya, dan teman2 sudah bisa menampilkan latitude dan longitude user di website kalian, jangan lupa untuk meng allow permision location jika ada pop up dari browser.
Jika teman2 suka dengan tutorial ini jangan lupa untuk subscribe blog kami, dan kalau ada pertanyaan atau request, tinggalkan komentar.
Terima Kasih.
Tags
Tutorial JS