HTML5 Geolocation

Tag HTML5 geolocation adalah element untuk mendapatkan koordinat lokasi user.

Geolocation tidak dapat berdiri sendiri, sama seperti canvas html yaitu membutuhkan javascript.

Hampir semua web browser modern saat ini mendukung fitur ini.

Cara menggunakan

Untuk menggunakan geolocation, kita menggunakan action click getCurrentPosition() yang terhubung dengan js.

<p>Klik tombol dibawah untuk tahu posisi latitude dan longitude.</p>

<button onclick="dapatLokasi()">Klik Disini</button>

<p id="klik_lokasi"></p>

<script>
var x = document.getElementById("klik_lokasi");

function dapatLokasi() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(tampilPosisi);
  } else { 
    x.innerHTML = "Browser kamu terlalu tua, upgrade ke versi terbaru.";
  }
}

function tampilPosisi(position) {
  x.innerHTML = "Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude;
}
</script>

Keterangan:

1. Cek apakah browser support if (navigator.geolocation)
2. Jika support akan menampilkan nilai fungsi tampilPosisi
3. Dimana fungsi tampilPosisi mengambil nilai latitude position.coords.latitude dan longitude position.coords.longitude

Integrasi google maps

Nilai longitude dan latitude tadi dapat kamu pakai untuk diintegrasikan dengan google maps.

Caranya dengan memodifikasi fungsi tampilPosisi, menjadi seperti ini:

function tampilPosisi(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+"'>";
}

Output html:

Sekian tutorial dasar html5 geolocation. Tidak detail memang, karena kalau detail sudah kearah backend developer. Nanti harus belajar API juga.