<html>
<head>
  <title>Cubaan Geolocation</title>
</head>

<body>
<script language="Javascript">
if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
  papar(position.coords.latitude, position.coords.longitude);
  });
}
else {
  if (document.getElementById("geo")) {
    document.getElementById("geo").innerHTML = "Pelayar web anda tidak menyokong Geolocation";
    document.getElementById("geo").style.color = "#FF0000";
  }
}

function papar(lat, longi) {
  if (document.getElementById("geo")) {
    document.getElementById("geo").innerHTML = "Latitude: " + lat + "&nbsp;Longitud: " + longi;
  }
}
</script>

<div id="geo"></div>

</body>
</html>

Latar Belakang 

Geolocation merupakan satu API (Application Programming Interface) yang baru diperkenalkan dalam HTML 5 dan telah disokong oleh kebanyakan pelayar web yang ada sekarang. Sebelum saya pergi dengan lebih lanjut mengenai ciri baru ini, jika anda berminat untuk mengetahui dengan lebih lanjut berkenaan HTML 5, anda boleh merujuk artikel berikut untuk mendapatkan gambaran awal mengenainya:

HTML 5 versus XHTML 2

 Idea disebalik Geolocatian ialah untuk mendapatkan maklumat lokasi dari sumber seperti GPS dan WiFI yang biasa didapati pada kebanyakan alatan bimbit sekarang (telefon mudah alih, PDA, komputer riba dan sebagainya). API Geolocation membolehkan pelayar mendapatkan maklumat mengenai lokasi anda dengan menyediakan antaramuka skrip untuk yang mudah seperti mengunakan fungsi getCurrentPosition() untuk mendapatkan latitude dan longitude lokasi anda.

Ini dapat memberi kelebihan kepada pembangun laman web untuk menyediakan kandungan laman yang bersesuaian dengan lokasi pelawat. Anda boleh mendapatkan spesifikasi lanjut berkaitan API Geolocation dari W3C di alamat ini:

http://www.w3.org/TR/2008/WD-geolocation-API-20081222/

Perbandingan

Jadual di bawah meringkaskan perbezaan kaedah biasa menentukan lokasi dengan menggunakan alamat IP berbanding dengan menggunakan API Geolocation.

  API Geolocation Kaedah biasa
Teknologi

Bergantung kepada jenis pelayar web.
Sebagai contoh, Firefox menggunakan alamat IP dan maklumat LAN-AP untuk menentukan lokasi.

Alamat IP
Ketepatan Sederhana tinggi Sederhana
Kebenaran dari pengguna Diperlukan Tiada
Sokongan Pelayar web yang menyokong HTML 5 Semua

Sokongan Pelayar

Sokongan untuk API Geolocation boleh didapati dari hampir semua pelayar yang menyokong HTML 5. Maklumat sokongan pelayar diringkaskan dalam jadual berikut:

Pelayar Sokongan API Geolocation
 Firefox  Versi 3.5 dan ke atas
 Chrome  Sokongan melalui Google Gear
 Opera  Sokongan dalam nightly build (versi percubaan untuk pembangun)
 Safari  https://support.apple.com/en-us/HT202080
 Internet Explorer  Sokongan melalui Google Gear untuk versi 7 ke atas

Demo

Dalam demostrasi ini, saya menggunakan Google Map untuk memaparkan lokasi anda yang akan diakses oleh pelayar web menggunakan API Geolocation.

Anda boleh mencubanya sendiri dengan berpandukan kod HTML dan Javascript seperti yang ditunjukkan di bawah. Kod ini akan memaparkan lokasi anda dalam bentuk koordinat (latitud dan longitud). Koordinat ini boleh dipaparkan dalam bentuk peta dengan menggunakan Google Map seperti yang ditunjukkan dalam demo ini.

Jika anda menggunakan Firefox versi 3.5 ke atas atau mana-mana pelayar web yg menyokong Geolocation, anda mungkin menyedari pelayar web anda mengeluarkan satu bar pemberitahuan seperti yang ditunjukkan dalam gambarajah di bawah ketika melayari halaman ini. Bar ini bertujuan untuk membolehkan anda memilih samada membenarkan pelayar web anda mengakses Geolocation ataupun tidak.

Jika anda membenarkannya, lokasi anda akan dipaparkan pada Google Map di bahagian bawah.

Only local images are allowed.

Tag #: 
Penilaian: 
No votes yet