Aplikasi GIS Sederhana dengan Google Map dan Ajax jQuery dan php, mysql

Terimakasih buat google yang menyediakan layanan google map sekaligus menyediakan API untuk membuat aplikasi-aplikasi menggunakan google map. Sekarang mari kita belajar membuat aplikasi GIS sederhana dengan menggunakan google map. Di artikel ini kita akan melihat bagaimana menampilkan google map di website kita, bagaimana menandai suatu lokasi, memberi nama, deskripsi kemudian menyimpannya ke dalam database. Dan bagaimana menampilkan kembali lokasi yang kita tandai tersebut ke google map sekaligus menampilkan deskripsinya

Sekarang mari kita mulai membuat kode-kodenya
Pertama-tama mari kita buat tabel datagis di database yang nanti tempat kita menyimpan data lokasi. Berikut adah struktur tabel datagis di database :

--
-- Table structure for table `datagis`
--

CREATE TABLE `datagis` (
  `nomor` int(5) NOT NULL auto_increment,
  `x` decimal(8,5) NOT NULL,
  `y` decimal(8,5) NOT NULL,
  `namalokasi` varchar(100) NOT NULL,
  `deskripsi` text NOT NULL,
  PRIMARY KEY  (`nomor`)
);

Meloading Google Maps API
Untuk menampilkan google map di website kita adalah dengan memanfaatkan javascript API google map. Langsung aja kita lihat kode :


<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>

Kode di atas akan mengambil file javascript google maps api dan file css untuk google maps.

Elemen DOM Peta
Untuk nantinya menempatkan di mana kita letakkan google map diwebsite, kita perlu membuat elemen DOM, contoh :

Map Options
Ada beberapa option-option yang perlu di konfigurasi untuk menampilkan google map. Berikut contoh kodenya :

var belitung = new google.maps.LatLng(-2.801732, 107.6699666);
var petaoption = {
zoom: 9,
center: belitung,
mapTypeId: google.maps.MapTypeId.TERRAIN
};

Variabel belitung untuk menentukan titik awal lokasi mana yang ingin kita tampilkan pertama kali ketika menampilkan google map, dalam bentuk koordinat Latitudes dan Longitudes.
zoom, berguna untuk menentukan nilai zoom yang akan ditampilkan, semakin besar nilainya sebagai besar zoom petanya.
center, berguna untuk menentukan lokasi mana yang menjadi titik tengah peta ketika ditampilkan
mapTypeId, menentukan tipe peta yang akan ditampilkan di website kita, pilihan tipenya adalah : ROADMAP, SATELLITE, HYBRID, TERRAIN

Membuat dan Menampilkan Objek Peta
Setelah kita tentukan konfigurasi map yang akan kita tampilkan, maka kita buat objek map dan menampilkanya di elemen DOM yang telah kita buat sebelumnya.

peta = new google.maps.Map(document.getElementById("petaku"),petaoption);

Kode tersebut kita membuat objek google map, menempatkannya di elemen DOM yang mempunyai id "petaku" dan menggunakan petaoption yang telah kita tentukan sebelumnya.

Membaca Event Click
Setelah kita berhasil menampilkan google map di website, kita ingin apabila peta diklik, maka akan ada fungsi yang akan kita jalankan, misalnya fungsi kasihtanda()

google.maps.event.addListener(peta,'click',function(event){
kasihtanda(event.latLng);
});

Memberi Tanda di Google Maps
Pada kode membaca event click di atas kita menjalankan fungsi kasihtanda() untuk membuat tanda di google maps

function kasihtanda(lokasi){
tanda = new google.maps.Marker({
position: lokasi,
map: peta
});
}

Kode di atas akan membuat objek Marker, menentukan posisinya di mana, lokasi berupa koordinat Latitudes dan Longitudes yang di dapat ketika map di klik yaitu event.latLng, dan ditaruh di map yang mana, dalam hal ini adalah objek peta yang telah kita buat sebelumnya.

Kode Lengkapnya
Silahkan Download