CandraLab

IT Pro & Developer Resource

Menu Close

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

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