Membuat Location Picker di Google map

tampilan location picker, nilai  latitude dan longitude otomatis mengikuti marker

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

Author: Candra Adi Putra

Candra Adi Putra adalah Alumni STMIK AKAKOM Yogyakarta. Like Candralab Studio Di Facebook.

10 thoughts on “Membuat Location Picker di Google map”

  1. 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.

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

Tinggalin komentar dong!