SISTEM INFORMASI GEOGRAFIS WEB DAN MOBILE

TUGAS IIIMENAMPILKAN DATA PADA DATABASE KE DALAM PETA

Oleh :

I Made Oka Mahendra Putra(1104505068)

JURUSAN TEKNOLOGI INFORMASIFAKULTASTEKNIK UNIVERSITAS UDAYANABUKIT JIMBARANMaret 2014

SOALMenampilkan data dari database berdasar koordinat yang diperoleh sebelumnya dengan menggunakan Google Maps API.

PENYELESAINDalam menampilkan data ke dalam peta menggunakan Google Maps API, hendaknya terkoneksi dengan internet karena peta dan data koordinat diperoleh dari sana.Struktur data pada database sebelumnya adalah sebagai berikut.

Gambar 3.1 Isi Data Tabel tb_gis

Hal yang dilakukan pada tugas kali ini adalah menampilkan data yang ada pada database seperti ditunjukkan pada gambar 3.1. Data tersebut akan terlihat pada peta sesuai dengan koordinat yang telah tersimpan dalam database, data tersebut ditandai dengan marker pada peta. Jika marker tersebut di klik maka akan muncul info window, atau keterangan yang terdapat pada marker tersebut.Untuk pertukaran data tetap menggunakan JSON. Koneksi terhadap database teah dipaparkan sebelumnya pada tugas 2. Script halaman utama akan ditunjukkan pada kode program 3.1.Menampilkan Peta

Kode Program 3.1 Halaman Utama Web

Halaman utama tersebut yang akan menjadi tempat peta itu muncul beserta marker-marker yang dibuat sesuai dengan data pada database. Script javascript terpisah dengan halaman utama, hanya dihubungkan menggunakan link file. Script javascript ini berisi tentang me-load data menggunakan JSON, menampilkan data terhadap peta sesuai koordinat, opsi peta, pembuatan marker beserta info window saat di klik.$(document).ready(function() {var mapOptions = {zoom : 7,center : new google.maps.LatLng(-6.023195, 117.060103),};var maps = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);var markers = [];$.get('data.php', function(output) {for (i = 0; i < output.length; i++) {var info = new google.maps.InfoWindow({content : " Nama pemilik : " + output[i].nama_pemilik + "" + " Alamat : " + output[i].alamat + "" + " Telepon : " + output[i].tlp});//membuat marker var marker = new google.maps.Marker({position : new google.maps.LatLng(output[i].lat, output[i].long),map : maps,infowindow : info});//membuat event info windowgoogle.maps.event.addListener(marker, 'click', function(event){this.infowindow.open(maps,this);});marker.setMap(maps);markers.push(marker);}},'json');});

Kode Program 3.2 Script Menampilkan Data Pada Peta (jmaps.js)

Pada script yang ditunjukkan pada kode program 3.2 awal tahap yang dilakukan adalah mengeset opsi peta yang akan dimunculkan, jika sudah maka tahap selanjutnya adalah menampilkan berdasar id yang bertindak sebagai canvas. Tahap selanjutnya adalah melakukan looping sebanyak data yang di-load terhadap database menggunakan JSON. Pada method, marker properti ditambahkan satu diluar dari references Google Maps API yaitu infowindow, gunanya untuk mengeset isi atau keterangan yang ada pada marker, infowindow tersebut sebelumnya telah dideklarasikan menggunakan method InfoWindow. Tahap selanjutnya adalah menambahkan addListener yang gunanya jika terjadi event klik pada marker maka akan muncul keterangan seperti gambar 3.2. hasil dari marker akan disimpan ke dalam array, guna membedakan marker satu dengan yang lainnya.Hasil uji coba terhadap script javascript pada kode porgram 3.2 akan diperlihatkan pada gambar 3.2.

Gambar 3.2 Hasil Uji Coba Terhadap Peta

Pada gambar 3.2 diperlihatkan bahwa data tersebut akan di perlihatkan ke dalam peta berdasar koordinat yang terdapat pada database sesuai dengan penjelasan sebelumnya. Terdapat multi marker pada peta sesuai dengan row pada database yang di-load berdasar query select yang diberikan. Ketika diklik pada marker maka akan muncul keterangan seperti nama pemilik rumah, alamat dan nomor telepon.