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

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

50 Comments

dani ilyas · 18 June , 2017 at 1:56 pm

ass mas chan…. bagai mana merubah data master peta jogya menjadi peta cianjur misal makasih ditunggu balasnyah

yispan316 · 16 February , 2017 at 12:24 pm

sangat membantu, terima kasih mas Candra

eko pranoto · 15 September , 2016 at 10:00 am

mas chandra thanks banget tutorial nya..maaf yah baru ngasih komen selama ini cuman jadi silent reader soalnya hahaha…mantap deh. sangat bermanfaat.

Bunda Rasyid · 1 September , 2016 at 8:57 am

Oops! Something went wrong.
This page didn’t load Google Maps correctly. See the JavaScript console for technical details.

kenapa ya pak..? ga kebuka.. harus daftar dulu biar dpt API Key digoogle..? sukron

    Rifqi Sucahyo · 3 September , 2016 at 4:51 pm

    Include librarynya ganti yang ini

Anonymous · 13 August , 2016 at 8:23 pm

Bagus nih artikel mas Candra…
Mau tanya, gmn klo nambahin tombol lokasi sekarang (lokasi device) manfaatin gps?

Masalahnya klo mau drag ke lokasi yg kita ga begitu paham posisinya bisa ga pas.
Klo bisa kan tinggal drag dikit buat ngepasin…

Maturnuwun

Anonymous · 22 July , 2016 at 12:43 am

pak di peta_view nya tidak bisa tampil petanya, itu karna apa?
input lokasi dllnya sudah sukses tpi untuk melihat petanya tidak bisa muncul.
mohon pencerahannya..

faridahutajulu · 16 June , 2016 at 8:29 am

mas di update lagi mas

Iyos · 7 May , 2016 at 4:01 pm

mas ada contoh yang input + gambar tidak?
saya msih kesulitan untuk input dgn gambar

Keysa Tian · 21 April , 2016 at 10:47 am

wihh bagus, mas candra klo mau + img sama deskirp/pesan gmn caranya ?

wahyupoer32 · 18 April , 2016 at 11:43 pm

mas candra kenapa tampilan peta view nya ndak muncul ya, untuk langkah langkahnya sudah sesuai dengan perintah mas candra?

yang salah dimana nya lagi ya mas?

sony · 7 September , 2015 at 7:06 am

sangat membantu bgt.. tp demo ny kok gk bisa di coba ya pak ???

wahyu · 31 August , 2015 at 12:06 am

mas bisakah kirim scriptnya ke email saya. script nya yang ada di link gx bisa di download.
terimakasih banyak :)

wahyu · 31 August , 2015 at 12:02 am

mas kok scriptnya kagak bisa di download ya?

mohamad fahd · 2 July , 2015 at 2:03 pm

mas klo ganti tanda markernya gmn y?

    Candra Adi Putra · 4 July , 2015 at 4:01 pm

    ganti saja iconnya

    mohamad fahd · 4 July , 2015 at 5:24 pm

    Klo dlam peta itu ada 2 marker yg beda gmna mas?

riyo hendriadhi · 20 June , 2015 at 1:33 am

Mas, Terima Kasih atas petunjuk tutrial ini. tapi sama mau tanya, gimana sih logika codingnya pas waktu marker id geser trus koordinatnya langsung masuk ke textfieldnya ??

Mohon petunjuknya

    Candra Adi Putra · 20 June , 2015 at 12:41 pm

    lihat di script fungsi updateMarkerPosition();

ilham · 13 January , 2015 at 11:20 am

mas, kenapoa ya long sama lat terbaca tapi mapnya gak keluar. saya masukan map pakai div denga id=’map’. js udah saya masukin semua

Simri Nubatonis · 13 November , 2014 at 5:52 pm

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

fadloe · 4 November , 2014 at 9:29 am

kenapa tidak bisa download file inputmap.zip ya pak?

Samuel · 10 September , 2014 at 1:54 pm

Ada yg bisa nolong, data udah bisa masuk ke db, tapi pas peta_view.php kok gak muncul y? http://i160.photobucket.com/albums/t166/hepmec/tanyapeta_zps651b64ad.png

amatirleksono · 9 September , 2014 at 7:14 pm

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

beimau · 22 August , 2014 at 10:19 am

mas lokasi yang diinput tidak tampil mas

syawqi · 20 August , 2014 at 1:54 pm

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

Ismail Adima · 6 August , 2014 at 10:36 am

mas, map viewnya kok gk muncul ya, padahal datanya masuk ke database

Ismail Adima · 6 August , 2014 at 10:23 am

mas kalo kita mau liat map yang kita input ke android gimana caranya..?

Fauji Rahman · 9 June , 2014 at 3:51 pm

Mas….
Ada Ebook Tentang Google Map?
Saya boleh minta?
tolong kirim ke email saya ya mas….
fauzirahman_fr7@yahoo.com
Terimakasih…

zubair · 22 May , 2014 at 10:20 pm

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

fauzi · 22 April , 2014 at 7:06 pm

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

    Candra · 22 April , 2014 at 7:17 pm

    short_open_tag=on atau ganti <? dengan <?php

kuroartz · 3 February , 2014 at 7:15 pm

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

    Candra Adi Putra · 3 February , 2014 at 8:19 pm

    pastkan short_open_tag=on

    joko setiawan · 14 June , 2015 at 2:20 am

    short_open_tag=on dimana nya ya mas di form yang mana

Anonymous · 3 February , 2014 at 7:14 pm

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

Arif Jati Furniture · 12 January , 2014 at 2:45 am

hadeeeh, ribet gan .gak paham ane

Ambar · 5 December , 2013 at 2:50 pm

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

Dais Nurfaizi · 31 October , 2013 at 8:40 am

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

    Candra Adi Putra · 31 October , 2013 at 10:10 am

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

    di baris pertama index.php

umbu_awank · 3 August , 2013 at 5:41 am

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

agung · 12 July , 2013 at 1:05 pm

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

    Candra Adi Putra · 14 July , 2013 at 4:54 pm

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

deph · 13 June , 2013 at 4:55 am

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…

    Candra Adi Putra · 14 June , 2013 at 1:07 am

    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

Kasmui · 5 June , 2013 at 8:00 pm

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?

    Candra Adi Putra · 11 June , 2013 at 1:46 pm

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

    Kasmui · 13 June , 2013 at 4:20 am

    alhamdulillah error sudah teratasi, trims sharingnya ya, semoga shodaqoh jariyah ilmu anta diterima Allah ya, hasilnya ini nih… http://kimia.unnes.ac.id/kasmui/masjid/

Anonymous · 2 April , 2013 at 6:52 pm

terimakasih atas sharingnya mas gan sangat membantu

Tinggalkan Komentar plz!