Cara Input data lokasi di Google Map

Jika kita ingin membuat aplikasi web Google map, salah satu tugas yang harus dilakukan adalah membuat input data lokasi secara interakif. User memindahkan pin marker di google map dan secara otomatis latitude dan longitude akan ikut berupah di textfieldnya. Yup, itulah yang akan kita buat. Gambaran tampilan dari input datanya tampak seperti gambar dibawah ini.

Tampilan dari hasil input data tampak seperti digambar dibawah ini.

Rancangan database

CREATE TABLE IF NOT EXISTS `lokasi` (
  `idlokasi` int(11) NOT NULL AUTO_INCREMENT,
  `nama` varchar(100) DEFAULT NULL,
  `lat` varchar(50) DEFAULT NULL,
  `lng` varchar(50) DEFAULT NULL,
  PRIMARY KEY (`idlokasi`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

Struktur File project

Berikut ini adalah file yang dibutuhkan untuk membuat input data lokasi

Penjelasan file & Folder

1. CSS, folder berisi dua file CSS, bootstrap.min.css dan peta.css, bootstrap dipakai untuk membuat layout dan peta.css dipakai untuk melayout peta google map diinput data
2. index.php, file utama (front page/master page)
3. inc/config.php, konfigurasi database
4. js/lokasi.js, script utama untuk menampilkan peta dan meletakan latitude dan lotitude marker secara otomatis ke textfield
5. lokasi/lokasi_form.php, Form input lokasi (gambar 1)
6. lokasi/lokasi_action.php,Kode untuk menyimpan lokasi kedalam database
7. lokasi/peta_view.php,Kode untuk mengambil lokasi dari database, dan menampilkan lokasi marker google map

Dua file paling peting disini adalah js/lokasi.js dan lokasi/lokasi_form.php. Berikut ini adalah potongan kodenya

Lokasi.js

function updateMarkerPosition(latLng) {
		document.getElementById('lat').value = [latLng.lat()];
		document.getElementById('lng').value = [latLng.lng()];
	}

 
	
    var myOptions = {
      zoom: 12,
        scaleControl: true,
      center:  new google.maps.LatLng(-7.791446,110.366909),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };

	
    var map = new google.maps.Map(document.getElementById("map"),
        myOptions);

	var marker1 = new google.maps.Marker({
	position : new google.maps.LatLng(-7.791446,110.366909),
	title : 'lokasi',
	map : map,
	draggable : true
	});
	
	//updateMarkerPosition(latLng);

	google.maps.event.addListener(marker1, 'drag', function() {
		updateMarkerPosition(marker1.getPosition());
	});
	

Lokasi_form.php

<form   method="POST" id="form1" action="lokasi/lokasi_action.php"
 class='form-horizontal'>
 <legend>  lokasi</legend>


	 <div class="control-group">
    <label class="control-label" for="nama">Nama Lokasi</label>
    <div class="controls">
      <input type="text" name='nama' class='input-xlarge'>
    </div>
  </div>	
  <div class="control-group">
    <label class="control-label" for="lat">latitude</label>
    <div class="controls">
      <input type="text" name='lat' id='lat' class='input-xlarge' >
    </div>
  </div>
  <div class="control-group">
    <label class="control-label" for="lng">Longitude</label>
    <div class="controls">
      <input type="text" name='lng' id='lng' class='input-xlarge'>
    </div>
  </div>
  <div class="control-group">
    <div class="controls">
     
      <button type="submit" class="btn btn-success" 
name='aksi'value=<?=$aksi?> ><?=$aksi?></button>
    </div>
  </div>
  </form>

Demo dan source code

Bagi yang ingin mencoba demonya silahkan klik disini dan bagi yang ingin mendownload source code lengkap, silahkan download sini