Membuat GIS Google Map Seperti Wikimapia dengan jQuery

Posted on Updated on


Sekarang kita lanjut lebih dalam lagi dengan google map API. Di sini kita akan belajar bagaimana membuat bentuk Rectangle (persegi) dari dua marker yang telah kita buat di google map, menyimpannya dalam database. Kita juga akan belajar bagaimana menampilkan semua daerah-daerah yang telah disimpan menggunakan jquery json, kemudian menampilkan informasi daerah yang telah ditandai menggunakan jendela informasi yang kita buat atau desain sendiri.

Mari kita lihat algoritma dan kode dari GIS google map ini.

Algoritma:

Membuat tabel datapeta di database
Meloading Google Maps Javascript API
Menampilkan peta di halaman web
Mengambil data daerah yang sudah ditandai dari database, dengan format JSON
Menampilkan di google map data daerah yang diambil dari database
Memberi event listener click pada google map
Membuat rectangle dari dua marker/tanda yang dibuat
Menyimpan ke database
Kode lengkapnya

Membuat tabel datapeta di database

Berikut adalah struktur tabel datapeta di database MySQL

CREATE TABLE `datapeta` (
`nomor` int(5) NOT NULL auto_increment,
`judul` varchar(100) NOT NULL,
`deskripsi` tinytext NOT NULL,
`lat1` double NOT NULL,
`lng1` double NOT NULL,
`lat2` double NOT NULL,
`lng2` double NOT NULL,
`warna` varchar(10) NOT NULL,
PRIMARY KEY (`nomor`)
)

Meloading Google Maps Javascript API

Menampilkan peta di halaman web

var jakarta = new google.maps.LatLng(-6.237281, 106.332724);
var petaoption = {
zoom: 14,
center: jakarta,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
peta = new google.maps.Map(document.getElementById(“petaku”),petaoption);

Sebelumnya kita harus membuat objek

di web kita, yang berfungsi sebagi tempat google map diletakkan.
Mengambil data daerah yang sudah ditandai dari database, dengan format json

Berikut kode PHP untuk mengambil data dari database MySQL dan menampilkannya dalam format JSON

ambildata.php

Jika kode di atas dijalankan, maka hasilnya seperti berikut:

{“wilayah”:
{“petak”:[
{“id”:”1″,
“judul”:”wilayah1″,
“deskripsi”:”ini adalah wilayah1″,
“x1″:”-6.23728179931641″,
“y1″:”106.332725524902”,
“x2″:”-6.24197483062744″,
“y2″:”106.340789794922”,
“warna”:”#FF0000″
},{
“id”:”2″,
“judul”:”wilayah2″,
“deskripsi”:”Ini adalah wilayah 2″,
“x1″:”-6.22712850570679″,
“y1″:”106.345596313477”,
“x2″:”-6.22038793563843″,
“y2″:”106.353668212891”,
“warna”:”#FF0000″
}
]
}
}

Menampilkan di google map data daerah yang diambil dari database

Sekarang setelah kita mendapatkan data dengan format JSON, kita lihat bagaimana mengakses data JSON dan menampilkannya.

function ambildatabase(akhir){
if(akhir==”akhir”){
//url untuk mengambil data paling akhir
//dieksekusi jika barusan menyimpan data
url = “ambildata.php?akhir=1”;
}else{
//url untuk mengambil data semuanya
url = “ambildata.php?akhir=0”;
}
$.ajax({
url: url,
dataType: ‘json’,
cache: false,
success: function(msg){
for(i=0;i<msg.wilayah.petak.length;i++){
judulx[i] = msg.wilayah.petak[i].judul;
desx[i] = msg.wilayah.petak[i].deskripsi;
petak = new google.maps.Rectangle({
map: peta,
fillColor: msg.wilayah.petak[i].warna,
fillOpacity: 0.3,
strokeColor: msg.wilayah.petak[i].warna,
strokeWeight: 1
});
var bingkai = new google.maps.LatLngBounds(
new google.maps.LatLng(msg.wilayah.petak[i].x1, msg.wilayah.petak[i].y1),
new google.maps.LatLng(msg.wilayah.petak[i].x2, msg.wilayah.petak[i].y2)
);
petak.setBounds(bingkai);
setinfo(petak,i);
}
}
});
}

Dari contoh di atas, untuk mengakses judul dari data JSON yang telah kita buat sebelumnya adalah msg.wilayah.petak[i].judul, untuk mengakses deskripsi adalah msg.wilayah.petak[i].deskripsi
Memberi event listener click pada google map

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

Membuat rectangle dari dua marker/tanda yang dibuat

function kasihtanda(lokasi){
var gambar_tanda = ‘tanda.png’;
if(pertama == 0){
tanda1 = new google.maps.Marker({
position: lokasi,
map: peta,
icon: gambar_tanda
});
$(“#x1”).val(lokasi.lat());
$(“#y1”).val(lokasi.lng());
pertama = 1;
}else{
tanda2 = new google.maps.Marker({
position: lokasi,
map: peta,
icon: gambar_tanda
});
$(“#x2”).val(lokasi.lat());
$(“#y2”).val(lokasi.lng());
buat_persegi();
pertama = 0;
}

}

function buat_persegi(){
warnashape = $(“#warnaku”).val();

//Membuat objek persegi/rectangle
rectangle = new google.maps.Rectangle({
map: peta,
fillColor: warnashape, //Mengatur warna persegi
fillOpacity: 0.3, //Mengatur transaprasi persegi
strokeColor: warnashape, //Mengatur warna border persegi
strokeWeight: 1 //Mengatur ketebalan border
});
var latLngBounds = new google.maps.LatLngBounds(
tanda1.getPosition(),
tanda2.getPosition()
);
rectangle.setBounds(latLngBounds);

//Menghapus kedua tanda/marker yang dibuat sebelumnya
tanda1.setMap(null);
tanda2.setMap(null);
}

Menyimpan ke database

$(document).ready(function(){
$(“#tombol_simpan”).click(function(){
var wrna = $(“#warnaku”).val();
var x1 = $(“#x1”).val();
var y1 = $(“#y1”).val();
var x2 = $(“#x2”).val();
var y2 = $(“#y2”).val();
var judul = $(“#judul”).val();
var des = $(“#deskripsi”).val();
$(“#loading”).show();
$.ajax({
url: “simpanlokasi.php”,
data: “x1=”+x1+”&y1=”+y1+”&x2=”+x2+”&y2=”+y2+”&judul=”+judul+”&des=”+des+”&wrn=”+wrna,
cache: false,
success: function(msg){
alert(msg);
$(“#loading”).hide();
$(“#x1”).val(“”);
$(“#y1”).val(“”);
$(“#x2”).val(“”);
$(“#y2”).val(“”);
$(“#judul”).val(“”);
$(“#deskripsi”).val(“”);
ambildatabase(‘akhir’);
rectangle.setMap(null);
}
});
});
$(“#tutup”).click(function(){
$(“#jendelainfo”).fadeOut();
});
});
download Code langsung ke Web empunya

3 thoughts on “Membuat GIS Google Map Seperti Wikimapia dengan jQuery

    - said:
    April 17, 2012 at 2:03 pm

    koq g bs di donlot gan?

      mazadie responded:
      April 20, 2012 at 2:31 am

      silahkan masukan emailnya nanti saya kirim gan……..

    fandie said:
    January 21, 2014 at 4:06 am

    mas klo mo nambah input data nya di infowindows bagaimana?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s