Pencarian Koordinat Di Google Maps Dengan Combobox

Google-Maps

Ok, di masih dengan cuaca hujan di kota Purwakarta yang adem ayem ini. Sebenernya artikel ini dari dulu pengen saya publish cuman karena sering kelupaan makanya ga pernah di publish… hehehehe

Sesuai dengan judul, kali ini saya akan share script untuk melakukan pencarian koordinat di Google Maps dengan combobox. Misalkan begini, saya punya warteg yang cabangnya tersebar seantero Jawa Barat. Nah ketika saya pengen liat cabang mana saja yang ada di kota Purwakarta atau Bandung, tentu saya memerlukan combobox untuk memilih kota tersebut. Setelah kota dipilih maka pencarian akan diproses dan marker koordinat dari cabang tersebut ditampilkan ke dalam peta. Dengan apa? tentunya dengan teknologi Ajax biar ringan dan proses bisa lebih cepet.

Ok scriptnya kaya begini :

 

 

 


 

© Warteg Cicko 2013

 

 

untuk script JSONnya kaya begini :

Untuk screenshotnya kaya begini nich :

googlemaps-search

 

Untuk Full Sourcecodenya disini :

download button

 

Selamat mencoba dan Semoga bermanfaat 😀

Berlangganan Artikel

Daftarkan email anda sekarang dan dapatkan update terbaru dari artikel saya

I will never give away, trade or sell your email address. You can unsubscribe at any time.

Powered by Optin Forms

28 tanggapan pada “Pencarian Koordinat Di Google Maps Dengan Combobox”

  1. salam kenal dari palembang gan, perkenalkan nama saya rais dari palembang.

    terima kasih atas ilmu nya gan sangat bermanfaat…ini yang saya cari…

    ada pertanyaan gan, penerapan geocoder dalam php dan mysql nya bagaimana.

    pencarian data nya dari database seperti warteg gan….maka tampil data yang dicari

    saya sedang mempelajari gis warteg punya agan terima kasih banyak gan, mohon dijawab gan ya

    1. wah..jauh2 dari palembang nich…hehehe 😀
      maksudnya pencariannya pake geocoder ya? bisa digabung dengan geocoding disini…tinggal dimodifikasi sedikit koq, kalo yang di combobox khan pencariannya pake id…nah untuk geocoding pencariannya bisa berdasarkan nama daerah itu sendiri, untuk menampilkan koordinatnya dilakukan oleh script geocoding, sedangkan untuk menampilkan multimarker dari cabangnya baru pake json…mudah-mudahan sedikit bisa membantu 🙂

  2. salam agan elcicko mau nanya gan tentang skripsi ane pake google map lat sama long.. oya klo mau cara nampilkan lat long yg udah kesimpen dari database misalkan ane punya database nama A , B , C, D , E, F ane mau nampilin lat long gmn yah cara nya gan pake 2 combo box misal ane mau nyari asal A tujuan F.. yg tampil A, C, D, F? mungkin agan bisa bantu thanks

        1. bisa koq mas, cara ngebedain marker satu dengan yang lain…bikin 1 field di dtabase…
          misalkan kategori, isinya ada rumah sakit, kuburan, dan restoran…nah mas isi aja kolomnya dengan nama file image sesuai dengan nama kategorinya…
          abis itu di JSON-nya mas tinggal kasih tag icon tadi…

          semoga membantu 🙂

  3. gan elcicko salam kenal, thanks buat share ilmunya..

    oya gan mau nanya klo gambar iconnya(marker.png) berbeda – beda bisa ga ga hanya satu?? thanks

  4. cara nya gimana mas? soal nya yang tutorial yang pencarian ini, saya gabung dengan yang infowindow, info window nya enggak mau muncul

  5. iya mas, makasih. ditunggu..
    saya binngung masukin content di infowindow nya

    google.maps.event.addListener(tanda, ‘click’, (function(tanda, i) {
    return function() {
    infowindow.setContent(???????);
    infowindow.open(peta, tanda);

    kira” yang tanda ???? itu isi nya gimana ya mas?

    1. perasaan ga usah pake setContent deh mas.. gini aja misalnya

      var isistring = "nah ini tinggal diambil dari data geocoding";
      var infowindow = new google.maps.InfoWindow({content: isistring});

      google.maps.event.addListener(tanda, 'click', function() {
      infowindow.open(peta,tanda);
      });

      saya mungkin aja salah…saya ulik dulu ya mas… 🙂

  6. Gan saya mau tanya. Kalau misalkan dalam 1 form ada 2 button bagaimana cara nya? Jadi misalkan di pencarian menggunakan combobox ada 2 button, yang 1 untuk button menampilkan marker pada peta berdasarkan pencarian, button ke 2 untuk melakukan pencarian dalam bentuk tabel ke halaman lain?

  7. salam gan,,
    mau nanya gimana sih script buat pencarian berdasarkan combobox di google map,,
    tapi lebih sederhana ya mas,soalnya yg mas buat di atas saya kurang ngerti..
    gambarannya sperti ini:
    -pencarian lokasi bank mandiri
    -combobox=kecamatan
    -peta=kota medan
    tolong ya mas,kirimin ke email saya,,
    thanks..

    1. halo mas wan,
      ini udah yang paling sederhana koq. ga ribet sebenernya….
      untuk membuat koordinatnya mas wan musti punya data kecamatannya dulu, nanti bisa dicari koordinatnya lewat https://maps.google.com.
      kodingnya bisa disamain sama contoh diatas ini. sama persis koq. tinggal penyesuaian data aja.
      silahkan download dulu kodenya trus coba dijalanin dulu mas. 😀

      1. gak bisa juga mas,,petanya tampil tapi marker lokasi yang dicari gak tampil,,
        gimana tuh ya mas..
        saya punya 2 tabel dalam 1 database,
        tabel pertama berisi data kecamatan, tabel kedua berisi lokasi yang uda diinput koordinatnya,,
        nah skrg saya mau menampilkan marker (tabel lokasi ) tadi tapi berdasarkan pencarian combobox (tabel data kecamatan)..
        itu gimana kira2 codingnya ya mas?
        mohon bantuannya please…

  8. Assalamualaikum, mas bisa minta tolong gak source code ini di kirim ke email saya, buat ngerjain skripsi nih mas. mksh bnyk banget sblmnya mas

    1. saya lup filenya yang mana, sekarang ini memang lagi migrasi dari Box ke Dropbox karena Server Box sering down jadi script websitenya sering ga ke load. nanti linknya saya update

Tinggalkan Balasan