Cara Input data lokasi di Google Map | pasang iklan gratis, pasang iklan tanpa daftar, pasang iklan baris

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
?
source code
1
2
3
4
5
6
7
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

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
index.php, file utama (front page/master page)
inc/config.php, konfigurasi database
js/lokasi.js, script utama untuk menampilkan peta dan meletakan latitude dan lotitude marker secara otomatis ke textfield
lokasi/lokasi_form.php, Form input lokasi (gambar 1)
lokasi/lokasi_action.php,Kode untuk menyimpan lokasi kedalam database
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
?
source code
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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
?
source code
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

class='form-horizontal'>

lokasi

Nama Lokasi

latitude

Longitude

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

Website: http://www.candra.web.id/2013/03/03/cara-input-data-lokasi-di-google-map/

copy from:

http://kalimantantengah1.blogspot.com/

 

---

tag: pasang iklan gratis, pasang iklan tanpa daftar, pasang iklan baris