Di tutorial kali ini masih berkaitan dengan google maps, yaitu kita akan membuat script dimana kita bisa mendeteksi lokasi dari pengguna dengan menggunakan fitur HTML5 Geolocation.
Geolocation adalah proses mendeteksi lokasi keberadaan kita menggunakan koneksi internet. Menggunakan HTML 5 dan juga menggunakan Google Maps kita bisa menampilkan lokasi keberadaan kita pada peta di web.
Untuk persiapannya yang perlu kita persiapkan hanyalah text editor biasa. Disini saya menggunakan Sublime Text.
HTML5 Geolocation API hanya bisa support untuk browser dengan versi:
- Chrome: > 5.0
- Internet Explorer: > 9.0
- Firefox: > 3.5
- Safari: > 5.0
- Opera: > 16.0
Yuk langsung saja mari kita coba bagaimana mendeteksi lokasi kita.
Basic. Mendeteksi Koordinat Lokasi
Yang pertama, untuk awal kita akan mencoba mendeteksi lokasi kita dan menampilkan koordinat latitude dan longitudenya pada web. Script yang kita gunakan adalah:
<script>
var view = document.getElementById("tampilkan");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
view.innerHTML = "Yah browsernya ngga support Geolocation bro!";
}
}
function showPosition(position) {
view.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
Penjelasan dari script diatas adalah, pertama cek apakah browser support fitur geolocation, jika tidak support maka kita tampilkan tidak support, jika support selanjutnya kita panggil fungsi getCurrentPosition(), yang akan mengembalikan koordinat dari user. Fungsi showPositio() berguna untuk menampilkan koordinat dari lokasi kita ke dalam html. Source code lengkapnya:
<!DOCTYPE html>
<html>
<head>
<title>Demo Cek Lokasi Geolocation HTML5</title>
</head>
<body>
<center>
<p>Cek lokasi anda! >> <button onclick="getLocation()">Cek</button></p>
<p id="tampilkan"></p>
</center>
<script>
var view = document.getElementById("tampilkan");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
view.innerHTML = "Yah browsernya ngga support Geolocation bro!";
}
}
function showPosition(position) {
view.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
Ketika pengguna mengklik button, maka fungsi getLocation akan dipanggil, dan user akan mendapat popup apakah mengizinkan web untuk mentrack lokasi user. Jika kita mengizinikannya, maka akan ditampilkan koordinat kita.
Mengatasi Beberapa Error
Bagaimana jika ternyata browser kita ngga support? atau trnyata user tidak mengizinkan mendeteksi lokasi kita, atau lokasi tidak bisa ditemukan ataupun error2 lainnya? Kita bisa menghandle nya, dengen mendeteksi jenis dari errornya. HTML5 Geolocation API sudah menyediakanya. Scriptnya adalah sebagai berikut:
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
view.innerHTML = "Yah, mau deteksi lokasi tapi ga boleh :("
break;
case error.POSITION_UNAVAILABLE:
view.innerHTML = "Yah, Info lokasimu nggak bisa ditemukan nih"
break;
case error.TIMEOUT:
view.innerHTML = "Requestnya timeout bro"
break;
case error.UNKNOWN_ERROR:
view.innerHTML = "An unknown error occurred."
break;
}
}
Dengan menggunakan switch error, kita mendeteksi beberapa error apakah bernilai true. Pertama apakah jika user tidak mengizinkan, kedua karena lokasi tidak bisa didapatkan, yang ketiga adalah request time out, dan terakhir jika ada error lainnya.
Syntak html lengkapnya menjadi seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>Demo Cek Lokasi Geolocation HTML5</title>
</head>
<body>
<center>
<p>Cek lokasi anda! >> <button onclick="getLocation()">Cek</button></p>
<p id="tampilkan"></p>
</center>
<script>
var view = document.getElementById("tampilkan");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
view.innerHTML = "Yah browsernya ngga support Geolocation bro!";
}
}
function showPosition(position) {
view.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
view.innerHTML = "Yah, mau deteksi lokasi tapi ga boleh :("
break;
case error.POSITION_UNAVAILABLE:
view.innerHTML = "Yah, Info lokasimu nggak bisa ditemukan nih"
break;
case error.TIMEOUT:
view.innerHTML = "Requestnya timeout bro"
break;
case error.UNKNOWN_ERROR:
view.innerHTML = "An unknown error occurred."
break;
}
}
</script>
</body>
</html>
Menampilkan Dengan Menggunakan Google Maps
Ya, kalo cuma koordinat doang sih susah bacanya, ngga ketahuan juga lokasinya dimana? Nah kita juga bisa tampilin dengan menggunakan google maps, lokasi kita.
Langkahnya adalah kita perlu mengimport javascript API dari Google Maps: http://maps.google.com/maps/api/js lalu tambahkan script untuk menampilkan maps pada fungsi showLocation:function showPosition(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
latlon = new google.maps.LatLng(lat, lon)
mapcanvas = document.getElementById('mapcanvas')
mapcanvas.style.height = '500px';
mapcanvas.style.width = '500px';
var myOptions = {
center:latlon,
zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
var marker = new google.maps.Marker({
position:latlon,
map:map,
title:"You are here!"
});
}
Dengan begitu, kalian telah menampilkan lokasi kalian di peta.
Source Code Lengkap
<!DOCTYPE html>
<html>
<head>
<title>Demo Cek Lokasi Geolocation HTML5</title>
</head>
<body>
<center>
<p id="tampilkan"></p>
<p>Cek lokasi anda! >> <button onclick="getLocation()">Cek</button></p>
<div id="mapcanvas"></div>
</center>
<script src="http://maps.google.com/maps/api/js"></script>
<script>
var view = document.getElementById("tampilkan");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition, showError);
} else {
view.innerHTML = "Yah browsernya ngga support Geolocation bro!";
}
}
function showPosition(position) {
lat = position.coords.latitude;
lon = position.coords.longitude;
latlon = new google.maps.LatLng(lat, lon)
mapcanvas = document.getElementById('mapcanvas')
mapcanvas.style.height = '500px';
mapcanvas.style.width = '500px';
var myOptions = {
center:latlon,
zoom:14,
mapTypeId:google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
var marker = new google.maps.Marker({
position:latlon,
map:map,
title:"You are here!"
});
}
function showError(error) {
switch(error.code) {
case error.PERMISSION_DENIED:
view.innerHTML = "Yah, mau deteksi lokasi tapi ga boleh :("
break;
case error.POSITION_UNAVAILABLE:
view.innerHTML = "Yah, Info lokasimu nggak bisa ditemukan nih"
break;
case error.TIMEOUT:
view.innerHTML = "Requestnya timeout bro"
break;
case error.UNKNOWN_ERROR:
view.innerHTML = "An unknown error occurred."
break;
}
}
</script>
</body>
</html>
Hasil akhirnya adalah sebagai berikut, ya hasilnya akan berbeda-beda sesuai dengan lokasi temen-temen.
Yah, kan jadi ketauan deh lokasi rumah ane. :-D Tutorial kali ini segitu aja yaaa. Terima Kasih. Semoga Bermanfaat :-)
