Membuat Aplikasi Peta GIS dengan Google Maps API

Nah, kali ini saya akan membagikan sebuah aplikasi peta GIS Sederhana dengan memanfaatkan Google Map API. Tepatnya tadi siang, ketika mengerjakan sebuah project agency travel dimana si klien minta dimasukkan layanan peta google. Tidak terlalu sulit memang untuk memasukkan layanan peta google ke halaman web, tinggal daftarkan nama web kita, dan kita akan mendapatkan API key dari google. Jika bermain-main dengan peta google ini, saya jadi ingat dengan layanan peta google yang hadir lebih dulu, yaitu Google Earth. Dengan aplikasi ini, kita bisa melihat peta secara 3 dimensi dan enaknya lagi kita bisa menandai beberapa tempat strategis dengan fungsi mark yang terdapat di aplikasi tersebut. “Kelemahannya apa?”. Yaw aplikasi ini harus diinstalkan di komputer kita masing-masing dan lumayan boros resources. Sehingga kurang cocok untuk perangkat mobile/bergerak yang lagi booming akhir-akhir ini. Maka dari itu saya punya ide untuk membuat aplikasi peta sederhana yang bisa diakses via browser, dan ada fitur untuk menandai tempat-tempat strategis dimana koordinat tempat-tempat tersebut kita simpan ke dalam database.

Saya menggunakan bantuan jQuery untuk menyimpan dan menghapus koordinat yang terdapat di dalam database via AJAX. Logikanya cukup mudah, pertama-tama tampilkan peta dengan fungsi berikut

function loadDataLokasiTersimpan(){
('#kordinattersimpan').load('tampilkan_lokasi_tersimpan.php');
}
setInterval (loadDataLokasiTersimpan, 3000);
   
function peta_awal(){
loadDataLokasiTersimpan();
var settingpeta = {
zoom: 10,
center: koorAwal,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
peta = new google.maps.Map(document.getElementById("kanvaspeta"),settingpeta);
google.maps.event.addListener(peta,'click',function(event){
tandai(event.latLng);
});
}

Jika ingin menampilkan koordinat peta yang tersimpan di dalam database, bisa menggunakan fungsi di bawah ini :

function carikordinat(lokasi){
var settingpeta = {
zoom: 10,
center: lokasi,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
peta = new google.maps.Map(document.getElementById("kanvaspeta"),settingpeta);
tanda = new google.maps.Marker({
position: lokasi,
map: peta
});
google.maps.event.addListener(tanda, 'click', function() {
infowindow.open(peta,tanda);
});
google.maps.event.addListener(peta,'click',function(event){
tandai(event.latLng);
});
}

Dan yang terakhir, kita akan membuat sebuah penanda/marker tempat-tempat yang menurut kita strategis. Untuk menandai, kita bisa menggunakan fungsi di bawah ini :

function tandai(lokasi){
$("#koorX").val(lokasi.lat());
$("#koorY").val(lokasi.lng());
tanda = new google.maps.Marker({
position: lokasi,
map: peta
});
}

Nah, sekian dulu postingan saya ini. Kalau ada pertanyaan, silahkan komentar di bawah postingan ini. Semoga bisa bermanfaat untuk rekan-rekan yang kebetulan sedang belajar Google Map API.

Happy Blogging and Keep Coding

Download disini