Tutorial PHP & jQuery : Membuat Aplikasi Peta GIS Sederhana Dengan Google Map API

Sudah 4 hari gak posting, rasanya gimana gitu kalau gak posting sesuatu di blog ini :D. Yaw mau gimana lagi, di liburan semester ini saya lagi ada beberapa project yang harus diselesaikan. Dan baru kali ini saya mendapat waktu luang untuk mengisi blog ini lagi. 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
    });
}

“Terus, kalau koordinatnya ingin disimpan, caranya bagaimana?”. Hehe, silahkan baca postingan saya sebelumnya tentang menyimpan data dari form via AJAX. 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

Cheerrrsss….!!!!

[to_like]Download Aplikasi[/to_like]

23 comments

  1. rifky Reply

    sayangnya g ada tombol suka di postingan ini,,,,,,
    aku mau ngasih jempol ampe g bisa

  2. apae Reply

    Kalau untuk menentukan koordinat X dan Y menggunakan jquery gimana mas? Maksudnya kalau PETA yang di gunakan gak pakai google MAP tapi peta yang kita gambar sendiri… mohon buat tutorialnya…

  3. dona Reply

    tolong baget dong kakak contoh sistem.pake CI ,GIS Dengan Google Map API nya

  4. ipoel Reply

    gan.,tolong kasih contoh sistem yang pke CI, Gis dengan google Map Api dunk..yang lebih lengkap lagi..mksh

  5. ridha Reply

    mas,,,
    mau nanyak ne,,
    kalo koordinat yang dikirim dari GPS, tros disimpan dalam database, kemudian baru ditampilkan ke google map di web kita gimana ya??
    tolong dibantu ya,,
    terima kasih,,

    • Gede Lumbung Post authorReply

      devicenya apa??
      mending koordinat gps dikirim dari hape android, lebih mudah…
      kalo pake alat gps, saya kurang tau, blum pernah nyoba dan blum pernah punya đŸ˜€

  6. darma Reply

    mas lumbung saya sudah coba download dan coba di localhost tp ko ada keterangan error

    ( ! ) Warning: mysql_fetch_array() expects parameter 1 to be resource, boolean given in C:\wamp\www\gis_map\tampilkan_lokasi_tersimpan.php on line 26

    itu kenapa ya mas

  7. novinuari Reply

    Nama database ny salah..
    Coba ubah nama databaseny sesuai dgn nm database yg ad d koneksi.php

  8. Fery Reply

    kalo mau nambah fungsi search lokasi gmn y gan? parameter pencarianya nama kota atau daerah.

  9. irvan Reply

    gan yg lebih simple ad yah gan selain seperti ini hanya menunjukan loaksi tempat hanya untuk penambahan web d’contact us.php

    thaxs salam coding đŸ™‚

  10. handmadjava Reply

    gan kenapa ya pas di tampilkan error
    errornya gini
    Parse error: syntax error, unexpected ‘$koor’ (T_VARIABLE), expecting ‘(‘ in C:\xampp\htdocs\gis_map\tampilkan_lokasi_tersimpan.php on line 26

    kenapa ya gan ??

  11. odi Reply

    mau tanya dong, klo ini kan brati harus online ya ? klo kita mau modifikasi dan operasikan secara offline gmn ya ?

      • odi Reply

        klo untuk pencarian rute terpendek punya google itu gmn ya ? dari kemaren udh cari2 tp masih belum nemu, soalnya butuh jarak terpendeknya untuk jd variabel

  12. inu Reply

    kalu mau ganti peta bali nya itu jadi peta jakarta gimana gan?
    trimakasih

  13. iwan jon cibob Reply

    mas ada sourcode untuk aplikasi laundry tidak jika ada bisa kirim ke email saya terima kasih