HTML

HTML Geolocation API: Cara Membuat dan Code Sintaknya

Geolocation API pada HTML digunakan untuk menemukan posisi pengguna.

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.

APIChromeEdgeFirefoxSafariOpera
Geolocation5.0 – 49.0 (http)
50.0 (https)		9.03.55.016.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 >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 >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.

PropertiReturn
coords.latitudeGaris lintang sebagai angka desimal (selalu dikembalikan)
coords.longitudeBujur sebagai angka desimal (selalu dikembalikan)
coords.accuracyAkurasi posisi (selalu dikembalikan)
coords.altitudeKetinggian dalam meter di atas permukaan laut rata-rata (dikembalikan jika tersedia)
coords.altitudeAccuracyAkurasi ketinggian posisi (dikembalikan jika tersedia)
coords.headingHeading dalam derajat searah jarum jam dari Utara (dikembalikan jika tersedia)
coords.speedKecepatan dalam meter per detik (dikembalikan jika tersedia)
timestampTanggal / 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 >


Catur Kurnia Sari

Share
Tags: APIgeolocationhtml