Tolong pilih kategori sesuai, jenis posting (pertanyaan atau bukan) dan sertakan tag/topik yang sesuai misal komputer, php, mysql, dll.
Promosi atau posting tidak pada tempatnya akan kami hapus.
Mencantumkan kode program di posting Anda, tolong ikuti aturan yang sesuai, baca http://diskusiweb.com/discussion/39204/aturan-cara-menyisipkan-kode-program-di-diskusiweb

Baca cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

Membuat GeoLocation dengan HTML5 dan Google Maps API

image
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

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>;
<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 :)

(thePinkFighter)

Tanggapan

  • wah bagus sekali mas tutorialnya, maunanay kalo misalnya nerima koordinat yg dikirimkan dari gps yang disimpan di database caranya gimana ya?
  • thank;s...
  • kalo kita pengin buat kaya gitu tapi yang langsung muncul tuh desa atau tempat rumah saya gimana ? itu kan muncule di jogja/atau tempat kita ..
  • wah, ilmu baru..
    terimakasih..
    :)
  • @saefulloh Tinggal di buatkan koneksi ke database yg berisi informasi latitude longitude... untuk koordinat bisa menggunakan aplikasi di android (gps coordinates)... ada ide membuat aplikasi android yg parsing lat long secara berkala ke aplikasi web yg menerima variabel lat long....dan menampilkannya di g map....hehe
  • mantaf gan ntar di coba
  • coba dulu ya
  • edited May 2013
    Wah mantep banget informasinya. Nanti ane cobain gan...

    Thank u
  • mas.. kalo selain html 5 bisa ga gan??
  • mas, makasih. Dr kmrn w cb search d google tipsnya ga bs gabungin html, css sama javascript. jelas banget tutorilanya. 

  • Bagaimana cara mengambil kabupaten/kota dari location tersebut, soalnya saya mau buat validation berdasarkan lokasi
  • Ini cocok untuk website e-commerce
  • Salam Semua, saya baru bergabung di diskusiweb.com. Mau posting pertaanyaan kok radar susah. Ya. Tolong Dibantu
Sign In or Register to comment.