Geolocation API pada HTML digunakan untuk menemukan posisi pengguna.
Section Artikel
Temukan Posisi Pengguna
API Geolokasi HTML digunakan untuk mendapatkan posisi geografis pengguna.
Karena hal ini dapat membahayakan privasi, geolocation tidak akan tersedia kecuali pengguna menyetujuinya.
Catatan: Geolocation yang paling akurat terdapat pada perangkat dengan GPS, seperti smartphone.
Browser Support
Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung Geolocation.
| API | Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Geolocation | 5.0 – 49.0 (http) 50.0 (https) | 9.0 | 3.5 | 5.0 | 16.0 |
Catatan: Mulai Chrome 50, Geolocation API hanya akan bekerja dengan konteks yang aman seperti pada HTTPS. Jika situs berasal dari hosting yang tidak aman (seperti HTTP), permintaan untuk mendapatkan lokasi pengguna tidak akan berfungsi.
Menggunakan Geolocation HTML
Method getCurrentPosition () digunakan untuk return posisi pengguna.
Contoh di bawah menampilkan garis lintang dan bujur dari posisi pengguna.
<!DOCTYPE html> <html> <body> <p>Klik tombol untuk mendapatkan koordinat Anda.</p> <button onclick="getLocation()">Cobalah</button> <p id="demo"></p> <script> var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolokasi tidak didukung oleh browser ini."; } } function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude; } </script> </body> </html>
Penjelasan Contoh:
- Periksa apakah mendukung Geolocation
- Jika mendukung, jalankan method getCurrentPosition (). Jika tidak, tampilkan pesan kepada pengguna
- Jika metode getCurrentPosition () berhasil, ia mengembalikan objek koordinat ke fungsi yang ditentukan dalam parameter (showPosition)
- Fungsi showPosition () mengeluarkan Latitude dan Longitude
Contoh di atas adalah script Geolocation yang sangat dasar dan tanpa menggunakan error handling.
Handling Errors dan Rejections
Parameter kedua dari method getCurrentPosition () digunakan untuk menangani kesalahan. Hal ini akan menentukan fungsi untuk dijalankan jika gagal mendapatkan lokasi pengguna.
Contoh :
<!DOCTYPE html>
<html>
<body>
<p>Klik tombol untuk mendapatkan koordinat Anda.</p>
<button onclick="getLocation()">Klik disini</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
x.innerHTML = "Geolokasi tidak didukung oleh browser ini.";
}
}
function showPosition(position) {
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
x.innerHTML = "Pengguna menolak permintaan Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Informasi lokasi tidak tersedia."
break;
case error.TIMEOUT:
x.innerHTML = "Waktu permintaan untuk mendapatkan lokasi pengguna telah habis."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "Terjadi kesalahan yang tidak diketahui."
break;
}
}
</script>
</body>
</html>
Menampilkan Hasil pada Maps
Untuk menampilkan hasil pada map/peta maka memerlukan akses ke map service, seperti Google Maps.
Pada contoh di bawah ini, garis lintang dan bujur yang dikembalikan digunakan untuk menunjukkan lokasi di Google Map (menggunakan gambar statis):
function showPosition(position) {
var latlon = position.coords.latitude + "," + position.coords.longitude;
var img_url = "https://maps.googleapis.com/maps/api/staticmap?center=
"+latlon+"&zoom=14&size=400x300&sensor=false&key=YOUR_KEY";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}Informasi spesifik lokasi
Halaman ini telah mendemonstrasikan bagaimana cara menampilkan posisi pengguna pada maps.
Geolocation juga sangat berguna untuk informasi spesifik lokasi, seperti:
- Informasi lokal terkini
- Menampilkan Tempat Menarik di dekat pengguna
- Navigasi belokan demi belokan (GPS)
Method getCurrentPosition() – Return Data
Metode getCurrentPosition () mengembalikan nilai objek saat berhasil. Properti lintang, bujur, dan akurasi selalu dikembalikan. Properti lainnya dikembalikan jika tersedia.
| Properti | Return |
|---|---|
| coords.latitude | Garis lintang sebagai angka desimal (selalu dikembalikan) |
| coords.longitude | Bujur sebagai angka desimal (selalu dikembalikan) |
| coords.accuracy | Akurasi posisi (selalu dikembalikan) |
| coords.altitude | Ketinggian dalam meter di atas permukaan laut rata-rata (dikembalikan jika tersedia) |
| coords.altitudeAccuracy | Akurasi ketinggian posisi (dikembalikan jika tersedia) |
| coords.heading | Heading dalam derajat searah jarum jam dari Utara (dikembalikan jika tersedia) |
| coords.speed | Kecepatan dalam meter per detik (dikembalikan jika tersedia) |
| timestamp | Tanggal / waktu tanggapan (dikembalikan jika tersedia) |
Objek Geolocation – Method menarik lainnya
Objek gelocation juga memiliki method menarik lainnya, seperti :
- watchPosition () – Mengembalikan posisi pengguna saat ini dan terus mengembalikan posisi yang diperbarui saat pengguna bergerak (seperti GPS di dalam mobil).
- clearWatch () – Menghentikan metode watchPosition ().
Contoh di bawah ini menunjukkan method watchPosition (). Anda memerlukan perangkat GPS yang akurat untuk menguji ini (seperti smartphone):
<!DOCTYPE html>
<html>
<body>
<p>Klik tombol untuk mendapatkan koordinat Anda.</p>
<button onclick="getLocation()">Klik disini</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolokasi tidak didukung oleh browser ini.";
}
}
function showPosition(position) {
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
