Getting Better Accuracy with Google Maps API v3
Untuk mendapatkan lokasi user menggunakan google maps, saat ini beberapa browser sudah mendukung Geolocation API, yang merupakan standar W3C muncul untuk menemukan lokasi user atau lokasi perangkat. Jika browser anda tidak mendukung Geolocation API maka akan menggunakan Google Gears.
Berikut implementasi geolocation menggunakan Google Maps API v3 dan Google Gears.
Pertama buatlah file html kemudian tambahkan 3 library java script yang nantinya dibutuhkan, yaitu google maps api, kemudian gears_init.js yang berfungsi untuk mengecek apakah plugin google gears sudah ada pada browser anda, jika tidak maka javascript tadi yang akan bekerja, kemudian yang terakhir geo.js
Dari source diatas fungsi-fungsi untuk menampilkan maps dan memanggil geolocation belum ditampilkan, berikut bagian bagian dari fungsi-fungsi tersebut.
pada bagian pertama fungsi ini akan membuat halaman peta dengan menampilkan seluruh area. apabila ingin mengganti, semisal hanya ingin menampilkan sebagian daerah anda cukup mengganti titik koordinat sesuai lokasi yang anda inginkan.
kemudian untuk mengecek apakah fitur geolocation tersedia, tambahkan fungsi berikut
fungsi diatas akan mengecek apakah fitur geolocation tersedia, jika tersedia maka akan menentukan posisi perangkat, fungsi tersebut adalah
Jangan lupa untuk menambahkan fungsi untuk menampilkan pesan error jika terjadi kesalahan
setelah lokasi didapat melalui fungsi diatas, langkah selanjutnya menambahkan marker dan infowindow kedalam peta.
fungsi diatas juga akan menfokuskan peta pada lokasi yang didapat dengan membesarkan tampilan peta menjadi 13kali.
Berikut Source Code lengkapnya.
Jika anda ingin mencoba posisi anda silahkan klik tautan ini
Berikut implementasi geolocation menggunakan Google Maps API v3 dan Google Gears.
Pertama buatlah file html kemudian tambahkan 3 library java script yang nantinya dibutuhkan, yaitu google maps api, kemudian gears_init.js yang berfungsi untuk mengecek apakah plugin google gears sudah ada pada browser anda, jika tidak maka javascript tadi yang akan bekerja, kemudian yang terakhir geo.js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Geo Location</title> <script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"src="http://code.google.com/apis/gears/gears_init.js"> </script><script type="text/javascript"src="http://geo-location-javascript.googlecode.com/svn/trunk/js/geo.js"></script> <script type="text/javascript"> // kode javascript untuk memanggil fungsi geo location </script> </head> <body> <div id="map" style="width: 500px;height: 300px;border: 1px solid black;"></div> </body> </html>
Dari source diatas fungsi-fungsi untuk menampilkan maps dan memanggil geolocation belum ditampilkan, berikut bagian bagian dari fungsi-fungsi tersebut.
pada bagian pertama fungsi ini akan membuat halaman peta dengan menampilkan seluruh area. apabila ingin mengganti, semisal hanya ingin menampilkan sebagian daerah anda cukup mengganti titik koordinat sesuai lokasi yang anda inginkan.
(function() {
var map;
window.onload = function() {
// inisialisasi peta sesuai koordinat
var options = {
zoom: 1,
center: new google.maps.LatLng(31.35, 3.51),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
// fungsi untuk memanggil geo.js
}
// Function stubs
function handleError() {
}
function setPosition() {
}
})();
kemudian untuk mengecek apakah fitur geolocation tersedia, tambahkan fungsi berikut
if (geo_position_js.init()) {
// Creating a settings object
var settings = {
enableHighAccuracy: true
};
// Trying to determine the location of the user
geo_position_js.getCurrentPosition(setPosition, handleError, settings);
} else {
alert('Geo location tidak tersedia');
}
fungsi diatas akan mengecek apakah fitur geolocation tersedia, jika tersedia maka akan menentukan posisi perangkat, fungsi tersebut adalah
getCurrentPosition(), kemudian jika fungsi geolocation tidak maka akan muncul notifikasi alert('Geo location tidak tersedia');.Jangan lupa untuk menambahkan fungsi untuk menampilkan pesan error jika terjadi kesalahan
function handleError(error) {
alert('Error = ' + error.message);
}
setelah lokasi didapat melalui fungsi diatas, langkah selanjutnya menambahkan marker dan infowindow kedalam peta.
function setPosition(position) {
// Creating a LatLng from the position info
var latLng = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
// Adding a marker to the map
var marker = new google.maps.Marker({
position: latLng,
map: map
});
// Creating an InfoWindow
var infoWindow = new google.maps.InfoWindow({
content: 'You are here!'
});
// Adding the InfoWindow to the map
infoWindow.open(map, marker);
// Zooming in on the map
map.setZoom(13);
}
fungsi diatas juga akan menfokuskan peta pada lokasi yang didapat dengan membesarkan tampilan peta menjadi 13kali.
Berikut Source Code lengkapnya.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Geo Location</title>
<script type="text/javascript"src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript"src="http://code.google.com/apis/gears/gears_init.js">
</script><script type="text/javascript"src="http://geo-location-javascript.googlecode.com/svn/trunk/js/geo.js"></script>
<script type="text/javascript">
// kode javascript untuk memanggil fungsi geo location
(function() {
var map;
window.onload = function() {
// Creating a map
var options = {
zoom: 1,
center: new google.maps.LatLng(31.35, 3.51),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'), options);
// Checking if geo positioning is available
if (geo_position_js.init()) {
// Creating a settings object
var settings = {
enableHighAccuracy: true
};
// Trying to determine the location of the user
geo_position_js.getCurrentPosition(setPosition, handleError, settings);
} else {
alert('Geo functionality is not available');
}
};
function handleError(error) {
alert('Error = ' + error.message);
}
function setPosition(position) {
// Creating a LatLng from the position info
var latLng = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
// Adding a marker to the map
var marker = new google.maps.Marker({
position: latLng,
map: map
});
// Creating an InfoWindow
var infoWindow = new google.maps.InfoWindow({
content: 'You are here!'
});
// Adding the InfoWindow to the map
infoWindow.open(map, marker);
// Zooming in on the map
map.setZoom(13);
}
})();
</script>
</head>
<body>
<div id="map" style="width: 500px;height: 300px;border: 1px solid black;"></div>
</body>
</html>
Jika anda ingin mencoba posisi anda silahkan klik tautan ini
gag ngerti... makanan apa inih
BalasHapus@ari hehee....
BalasHapusini nih mainanku sekarang, mpe muka mirip peta..
peta ke surabaya? bikin buat busway noh... pasti laris manis...
BalasHapuside baguss....
BalasHapusnext time aja :D
trims informasinya,..sangat berguna sekali. untuk pendekatan lokasi di disisi client...kira2 gmn yach??
BalasHapusini sudah bisa di implementasikan disisi client kok. :D
BalasHapussaat pake modem,..kok kagak bisa bs ya??apa harus connect internet menggunakan wi-fi??pdhl dh ane coba gan
BalasHapusbisa kok..
BalasHapusbrowsr yang anda pakai apa ?
untuk browser rilis terbaru sudah support geo location koq :D
gan punya saya ko petanya ngga muncul, padahal pake browser gc terbaru?
BalasHapusartinya kalau cuma pasarnya Indonesia dan tinggal di Indonesia tidak perlu menggunakan ini ya. kecuali untuk target negara tertentu dan kita berada di Indonesia, begitukan maksudnya?
BalasHapus