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 men...

Mendeteksi Lokasi dengan HTML5 Geolocation

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:

  1. Chrome: > 5.0
  2. Internet Explorer: > 9.0
  3. Firefox: > 3.5 
  4. Safari: > 5.0
  5. 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.

Mengizinkan Deteksi Lokasi?

 

Menampilkan Koordinat

 

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.

Hasil Tampilan Maps

Yah, kan jadi ketauan deh lokasi rumah ane. :-D Tutorial kali ini segitu aja yaaa. Terima Kasih. Semoga Bermanfaat :-)


About Author

Hasyemi Rafsanjani Asyari

null. I'm proud to be Stalker. Currently Mahasiswa Politeknik Negeri Jakarta. Currently Microsoft Student Partners Indonesia Regional Jabodetabek. Founder of a Company.


Comment & Discussions

  • Hellmi Fitrayadi
    om apakah fitur geolocation pada google maps api tdk support untuk browser chrome versi mobile? karena saya test code diats dengan chrome mobile muncul psn error sedangkan pada mozilla work..

  • martin
    Mas mau tanya kalo error Yah, mau deteksi lokasi tapi ga boleh :( di Laptop maupun di HP dengan brower Chrome , bgmn solusinya y? Apakah coding lokasi ini dpt kita simpan ke field latitude dan longitude di mysql gmn caranya yo >

  • Amelia Fauziyah
    hallo, selamat siang. saya sangat berterimakasih sekali anda memposting tutorial ini untuk kebutuhan tugas. saya ingin bertanya, apakah kodingan ini bisa di simpan ke dalam my sql. dan apakah support pada web browser di hp? terimakasih saya berharap anda membalas pesan saya. :)

    • Ananq Suryana

      Lanjutannya mungkin ada di sini. Reference lainnya:

      www-w3schools-com/html/html5_geolocation.asp


  • Please LOGIN before if you want to give the comment.