Membuat GeoLocation dengan HTML5 dan Google Maps APIworkload analysis

Jika Anda saat ini mengembangkan website bisnis ataupun yang mengandalkan informasi lokasi. Akan sangat bagus rasanya kalau ditambahkan fitur Geolocation. Fitur ini memang sangat berguna sekali untuk dapat mendeteksi keberadaan visitor Anda, sehingga Anda pun akan dengan mudah menemukan lokasi calon customer dari bisnis Anda yang berdekatan lokasinya. Kebiasaan yang dilakukan oleh seseorang ketika ingin membeli sesuatu, maka yang dicari adalah tempat membeli produk yang mudah dijangkau. Selain tidak membuang banyak waktu, juga lebih cepat proses membelinya karena lebih dekat.

Nah, ada cara cukup mudah untuk memasang fitur geolocation ini di website Anda. Cukup dengan bantuan HTML5 serta API Google Maps saja, yuk kita mulai membuatnya.

Langkah 1

Dalam contoh ini kita akan menggunakan 1 file HTML saja yang mana di dalamnya akan diisi dengan CSS serta Javascript juga. Untuk memulai kita harus membuat box yang akan menampung tampilan maps lokasi dari visitor

<div id="mapDiv"></div>

Langkah 2

Tambahkan CSS sederhana agar tampilan geolocation nanti tampil lebih bagus

#mapDiv {
    width:500px;
    height:300px;
    border:1px solid #efefef;
    margin:auto;
    -moz-box-shadow:5px 5px 10px #000;
    -webkit-box-shadow:5px 5px 10px #000;
}

Langkah 3

Untuk dapat menampilkan maps lokasi dibutuhkan API Google Maps, tambahkan script ini pada HEAD script HTML Anda

<script type="text/javascript" src='http://maps.google.com/maps/api/js?sensor=true'></script>

Untuk mengetahui apakah browser kita mendukung Javascript kita harus menambahkan JS bagian ini sebagai pengecekan :

if(navigator.geolocation) {
 
}

Di dalam IF di atas kita harus membuat fungsi yang mana di dalamnya menggunakan fungsi HTML5 getCurrentPosition, dalam contoh ini kita menggunakan fungsi buatan yang kita namai visitorLocation().

function visitorLocation(position) {
    //Creates a variable called point and sends the latitude and longitude to Google Maps to get your position
    var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
 
    //Settings for the map  
    myOptions = {
        zoom: 15,
        center: point,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    },
 
    //Finding the div we want the map to be in
    mapDiv = document.getElementById("mapDiv"),
    //Pass in the div and map settings to the map
    map = new google.maps.Map(mapDiv, myOptions),
 
    //
    marker = new google.maps.Marker({
        position: point,
        map: map,
        title: "You are here"
    });
}

Setelah menaruh fungsi visitorLocation() di dalam pengecekan IF, kita juga harus menambahkan script ini di bawah fungsi visitorLocation() :

navigator.geolocation.getCurrentPosition(visitorLocation);

Langkah 4

Gabungkan script HTML, CSS dan Javascript semuanya menjadi utuh seperti ini :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>HTML5 Geolocation</title>
<script  type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script&gt;
<script>
 
    if(navigator.geolocation) {
 
        function visitorLocation(position) {
            var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude),
 
            myOptions = {
                zoom: 15,
                center: point,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            },
 
            mapDiv = document.getElementById("mapDiv"),
            map = new google.maps.Map(mapDiv, myOptions),
 
            marker = new google.maps.Marker({
                position: point,
                map: map,
                title: "You are here"
            });
        }
        navigator.geolocation.getCurrentPosition(visitorLocation);
    }
</script>
<style>
#mapDiv {
    width:500px;
    height:300px;
    border:1px solid #efefef;
    margin:auto;
    -moz-box-shadow:5px 5px 10px #000;
    -webkit-box-shadow:5px 5px 10px #000;
}
</style>
</head>
<body>
<div id="mapDiv"></div>
</body>
</html>

Cukup sederhana bukan? Selamat mencoba