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.

akakom

Tampilan dari hasil input data tampak seperti digambar dibawah ini.

Hasil input data yang tampil dipeta

Hasil input data yang tampil dipeta

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

Tree project

Tree project

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

Penulis: Candra Adi Putra

CandraLab Studio adalah Software house di Yogyakarta, Indonesia yang fokus ke aplikasi Mobile (Android) dan Web . Hubungi saya di candraadiputra(at) gmail.com

Tagged on:     

29 thoughts on “Cara Input data lokasi di Google Map

  • 13 November , 2014 at 5:52 pm
    Permalink

    Maaf bang, mau tanya neh:
    Kan saya dapat code utk google map, ini dia codenya:
    GPS Lat Long : -8.6909853,115.1677553=embed
    Nah saya input di database seperti ini:
    https://www.google.com/maps/embed?GPS Lat Long : -8.6909853,115.1677553=embed
    dan mau muncul kalo di localhost, tapi saya coba onlinekan, gak muncul apa2 bang.
    Kira2 bisa bantu nggak?
    Boleh saya konsultasi dengan abang? Bener2 mohon bantuannya.
    Thanks sebelumnya

    Reply
  • 4 November , 2014 at 9:29 am
    Permalink

    kenapa tidak bisa download file inputmap.zip ya pak?

    Reply
  • 9 September , 2014 at 7:14 pm
    Permalink

    tq banyak mas…
    tapi saya kesulitan bagaimana lokasi yang sudah kita simpan mempunyai atau menampilkan grafik dari data mysql misalnya data pembeli tiap jam
    sekalian dibikinke sample demonya mas
    trim mas …..semoga anda diberikah ilmu yang berlimpah

    Reply
  • 20 August , 2014 at 1:54 pm
    Permalink

    mas punya contoh pencarian lokasi di google map pakek php?
    terimakasih.,

    Reply
  • 22 May , 2014 at 10:20 pm
    Permalink

    map view nya ttp g tmpil nih mas. kira” slain short_open_tag & tag <?php yg di set ada lagi g mas ?

    Reply
  • 22 April , 2014 at 7:06 pm
    Permalink

    Mas Saya sudah coba tpi peta_view nya tidak muncul, knapa ya mas?
    Terimakasih.

    Reply
    • 22 April , 2014 at 7:17 pm
      Permalink

      short_open_tag=on atau ganti <? dengan <?php

  • 3 February , 2014 at 7:15 pm
    Permalink

    mau tanya dibagian map view ndak muncul knp ya? tp didatabaseny masuk? Makasih

    Reply
  • 3 February , 2014 at 7:14 pm
    Permalink

    mau tanya dibagian map view ndak muncul knp ya? tp didatabaseny masuk? Makasih

    Reply
  • 5 December , 2013 at 2:50 pm
    Permalink

    mau tanya dibagian map view ndak muncul knp ya? tp didatabaseny masuk? Makasih

    Reply
  • 31 October , 2013 at 8:40 am
    Permalink

    gan ko pas ane download trs coba di localhost masih ada tulisan notice undefinded variable di line 38

    Reply
    • 31 October , 2013 at 10:10 am
      Permalink

      tambahkan
      <php
      error_reporting(E_ALL ^ E_NOTICE);
      ?>

      di baris pertama index.php

  • 3 August , 2013 at 5:41 am
    Permalink

    bagaimana codenya agar dalam memasukan data alamat (asal maupun alamat yang dituju) kita menggunakan database yang telah kita masukin lat dan lng nya gan,,makasi

    Reply
  • 12 July , 2013 at 1:05 pm
    Permalink

    ini apa ya mas ? , Parse error: syntax error, unexpected $end in /home/cand925c/public_html/demo/gmap/inputmap/lokasi/peta_view.php on line 65

    Reply
    • 14 July , 2013 at 4:54 pm
      Permalink

      oh itu karena server kemarin diupgrade sehingga tidak mendukung short_open_tag php, coba aja di localhost

  • 13 June , 2013 at 4:55 am
    Permalink

    saya mau tanya kalo kita mau input data ke database tapi kita tidak perlu menginputkan latitude dan longitude itu gmn caranya? mohon pencerahannya
    Terima kasih…

    Reply
    • 14 June , 2013 at 1:07 am
      Permalink

      loh kok aneh, yang sedang kamu baca itukan cara input otomatis . kamu tinggal drag markernya dan otomatis lat/long ikut berubah di input textfieldnya. saya malah jadi bingung liat pertanyaan ini

  • 5 June , 2013 at 8:00 pm
    Permalink

    saat awal running, tampilan Map View sukses, tapi lama kelamaan setelah memasukkan data banyak (sekitar 15) kok Map View selalu tidak menampakkan peta, kenapa ya?

    Reply
    • 11 June , 2013 at 1:46 pm
      Permalink

      banyak alasannya, coba cek di developer konsole..ada error merah ga? biasanay ada error di google map javascript

  • 2 April , 2013 at 6:52 pm
    Permalink

    terimakasih atas sharingnya mas gan sangat membantu

    Reply

Tinggalin komentar dong!