SISTEM INFORMASI GEOGRAFIS WEB DAN MOBILE

TUGAS IVMENAMPILKAN 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.

PENYELESAIANDalam 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 IdLatitudeLongitudeNama PemilikAlamatTelepon
$.get('data.php',function(output){for(i=0;i

Kode Program 3.2 Web Service

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 arrMarkers = [];$.get('data.php', function(output) {for (i = 0; i < output.length; i++) {var marker = new google.maps.Marker({position : new google.maps.LatLng(output[i].latitude, output[i].longitude),map : maps});google.maps.event.addListener(marker, 'click', function(event){for(j = 0; j < arrMarkers.length; j++){if(arrMarkers[j].getPosition() == event.latLng){$.get('data.php?r=alamat&lat='+event.latLng.lat()+'&lng='+event.latLng.lng(),function(output){alert(output);});break;}}});arrMarkers.push(marker);}},'json');});

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

Pada script yang ditunjukkan pada kode program 3.3 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. Dalam menampilan nama pemilik, alamat dan no telepon pada halaman HTML menggunakan alert. Data diperoleh dari web service.

Hasil uji coba terhadap script javascript pada kode porgram 3.3 akan diperlihatkan pada gambar 3.3.

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 pada alert.