Membuat Location Picker di Google map
Menampilkan marker dan infowindows adalah hal yang biasa di aplikasi GIS. Namun, anda juga harus memasukan lokasi koordinat kedalam database bukan? Kali ini saya akan mengajarkan bagaimana memasukan data latitude dan longitude kedalam input field dengan dragable marker. Jadi si user cukup menggeser pin di Peta, nanti posisi latitude dan longitude posisi terakhir otomatis akan berada di input field. Berikut ini adalah gambarannya
Untuk tutorial kali ini, saya hanya akan menunjukan bagaimana cara membuat location picker. Jika anda ingin menyimpan lokasi kedalam Peta, anda harus membuatnya sendiri dengan PHP dan MySQL.
Source code program
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Location picker</title>
<style type="text/css">
#map {
margin: 10px;
width: 600px;
height: 300px;
padding: 10px;
}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map"></div>
<table>
<form action=''>
<tr><td>Nama Lokasi:</td>
<td><input type="text" name='nama_lokasi' id='nama_lokasi'></td></tr>
<tr><td>Latitude</td>
<td> <input type="text" name='latitude' id='latitude'></td></tr>
<tr> <td>Longitude</td>
<td><input type="text" name='longitude' id='longitude'></td></tr>
</form>
</table>
Script peta saya letakan dibawah form, teknik ini memastikan, script dijalankan saat seluruh halaman sudah diload.
perhatikan komentar di scriptnya, jangan asal copas!
<script type="text/javascript">
//* Fungsi untuk mendapatkan nilai latitude longitude
function updateMarkerPosition(latLng) {
document.getElementById('latitude').value = [latLng.lat()]
document.getElementById('longitude').value = [latLng.lng()]
}
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: new google.maps.LatLng(-7.781921,110.364678),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
//posisi awal marker
var latLng = new google.maps.LatLng(-7.781921,110.364678);
/* buat marker yang bisa di drag lalu
panggil fungsi updateMarkerPosition(latLng)
dan letakan posisi terakhir di id=latitude dan id=longitude
*/
var marker = new google.maps.Marker({
position : latLng,
title : 'lokasi',
map : map,
draggable : true
});
updateMarkerPosition(latLng);
google.maps.event.addListener(marker, 'drag', function() {
// ketika marker di drag, otomatis nilai latitude dan longitude
//menyesuaikan dengan posisi marker
updateMarkerPosition(marker.getPosition());
});
</script>
</body>
</html>
Demo
Silahkan klik disini untuk melihat demonya
min, sekarang google map api ny musti pakai api key ya?
mas candra kenapa peta nya tidak tampil di koneksi kan internet seperti ini :
Oops! Something went wrong.
This page didn’t load Google Maps correctly. See the JavaScript console for technical details.
Baca ini
http://www.candra.web.id/tutorial-implementasi-google-map-javascript-api-key/
Mas candra, mkasih a/ sharing yg bagus ini .. jika kita ingin menangkap nilai longitude dan latitude lantas supaya dpt disave ke datbase misal mysql bgmn caranya y ?
atau jika saya punya aplikasi php yg berisi command update database tapi saya coba parsing variabel dari file html ini belum berhasil2 , mhn pncerahannya …:)
makasih banyak mas ilmunya
salam,
daftarperumahanmurah.com
mas gimana klo kita juga ingin mendapatkan alamatnya jg? tolong bantu scriptnya, terima kasih.
maksud saya nama jalannya
Kalo di file .php kenapa mapnya gak keluar ya mas ?
Kalau cara update lokasi berdasarkan textboxnya gimana ya gan?
ini makudnya kalo ngetik diform nanti pickernya bergerak ?kog error ya?
ya ga…kamu geser markernya, nanti input fieldnya terisi sendiri…bukan sebaliknya