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

tampilan location picker, nilai latitude dan longitude otomatis mengikuti marker

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

Categories: Google Maps

Candra Adi Putra

Candra Adi Putra S.Kom adalah Alumni STMIK AKAKOM Yogyakarta. Ingin Kerjasama, Pasang Iklan, Membuat aplikasi Android atau Web? hubungi saya di candraadiputra (at) gmail (dot) com atau WA ke 081328533115

11 Comments

suwandi · 20 December , 2016 at 9:04 pm

min, sekarang google map api ny musti pakai api key ya?

Fadli Rapii · 1 August , 2016 at 3:12 pm

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.

martin · 5 July , 2016 at 12:21 pm

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

Rumah Murah · 1 July , 2015 at 2:37 pm

makasih banyak mas ilmunya
salam,
daftarperumahanmurah.com

sihan · 17 March , 2015 at 5:35 am

mas gimana klo kita juga ingin mendapatkan alamatnya jg? tolong bantu scriptnya, terima kasih.

    sihan · 17 March , 2015 at 5:37 am

    maksud saya nama jalannya

ilham · 29 December , 2014 at 10:24 am

Kalo di file .php kenapa mapnya gak keluar ya mas ?

Akmal Dirgantara · 25 August , 2014 at 2:54 pm

Kalau cara update lokasi berdasarkan textboxnya gimana ya gan?

yun · 26 November , 2013 at 11:07 pm

ini makudnya kalo ngetik diform nanti pickernya bergerak ?kog error ya?

    Candra Adi Putra · 27 November , 2013 at 11:15 am

    ya ga…kamu geser markernya, nanti input fieldnya terisi sendiri…bukan sebaliknya

Tinggalkan Komentar plz!

This site uses Akismet to reduce spam. Learn how your comment data is processed.