Membuat GIS Dengan Google Map dan Ajax jQuery

Membuat GIS Dengan Google Map dan Ajax jQuery

Google yang menyediakan layanan google map sekaligus menyediakan API untuk membuat aplikasi-aplikasi menggunakan google map. Cara membuat ... 13.27.00

Google yang menyediakan layanan google map sekaligus menyediakan API untuk membuat aplikasi-aplikasi menggunakan google map. Cara 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.

Pertama-tama mari kita buat tabel data gis di database yang nanti tempat kita menyimpan data lokasi.


Berikut adalah 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 :

<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" />
<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, yaitu <div>, contoh :

<div id="petaku" style="width:600px; height:400px"></div>

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

Setelah bingung melihat penjelasan di atas, langsung aja kita lihat kode lengkapnya untuk membuat aplikasi GIS kita. Di sini saya menggunakan jQuery untuk menyimpan dan menampilkan lokasi-lokasi yang telah disimpan.

Download Source code lengkap | Source