Press "Enter" to skip to content

Menggunakan Geocoder Autocomplete Untuk Mengisi Form Alamat

geocoding-fill-address

Hai, seneng banget bisa ngeblog lagi disini, Alhamdulillah tangan saya juga udah pulih jadi saya udah bisa beraktifitas seperti biasa lagi. Cuman mungkin saya belum berani buat pulang kampung ke Purwakarta pake motor, jadi sementara saya pake bis aja dulu dech.

Ok, pada postingan ini saya akan membahas tentang bagaiaman cara menggunakan Geocoder Autocomplete untuk mengisi form alamat. Postingan ini terinspirasi dari project yang saya garap di kantor dimana klien saya pengen supaya pada form pengisian data alamat bisa autocomplete dari Google Maps. Jadi user ga usah cape-cape lagi ngisi alamatnya, tinggal isi di form autocomplete maka data alamat seperti Kota, Provinsi, Kode Pos dan juga Negara langsung terisi di field yang lainnya juga.

OK, sekarang kita bikin scriptnya ya…pertama-tama buka text-editor dan ketikkan script di bawah ini

<html>
  <head>
    <title></title>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    <script>
      var placeSearch, autocomplete;
      /*
      kita siapin dulu komponen formnya, 
      untuk dokumentasinya ada disini
      https://developers.google.com/maps/documentation/geocoding/#JSON
      */
      var componentForm = {
        route: 'long_name',
        locality: 'long_name',
        administrative_area_level_1: 'short_name',
        country: 'long_name',
        postal_code: 'short_name'
      };

      /*
      kita bikin inisialisasinya dulu, dengan mendeklarasikan service Google Maps Autocomplete
      lalu ketika form autocomplete di isi, maka service ini akan berjalan,
      setelah itu maka script ini akan memanggil fungsi isiAlamat()
      */
      function initialize() {
        autocomplete = new google.maps.places.Autocomplete((document.getElementById('autocomplete')), {
          types: ['geocode']
        });

        google.maps.event.addListener(autocomplete, 'place_changed', function () {
          isiAlamat();
        });
      }

      /*
      nah, fungsi ini untuk mengisi field-field pada form 
      dengan output hasil dari autocomplete tadi. 
      */
      function isiAlamat() {
        var place = autocomplete.getPlace();
        for (var component in componentForm) {
          document.getElementById(component).value = '';
          document.getElementById(component).disabled = false;
        }

        for (var i = 0; i < place.address_components.length; i++) {
          var addressType = place.address_components[i].types[0];
          if (componentForm[addressType]) {
            var val = place.address_components[i][componentForm[addressType]];
            document.getElementById(addressType).value = val;
          }
        }
      }

      /*
      fungsi ini berguna untuk geolocate, dimana nama jalan yang akan tampil di autocomplete
      tidak akan jauh dengan lokasi tempat kita berada.
      Fungsi ini berguna karena tanpa fungsi ini, autocomplete akan menampilkan alamat yang kurang akurat
      atau bahkan ngaco.
      */
      function geolocate() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function (position) {
            var geolocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            autocomplete.setBounds(new google.maps.LatLngBounds(geolocation, geolocation));
          });
        }
      }
    </script>
    <style>
      .form {
        width: 300px;
      }
    </style>
  </head>

  <body>
    <h2>Geocoder Autocomplete</h2>
    <pre class="prettyprint lang-html"><input id="autocomplete" style="width: 500px;" type="text" />
</pre>
    <form>
      <table id="alamat">
        <tbody>
          <tr>
            <td>Alamat</td>
            <td><input id="route" class="form" type="text" /></td>
          </tr>
          <tr>
            <td>Kota</td>
            <td><input id="locality" class="form" type="text" /></td>
          </tr>
          <tr>
            <td>Kode Pos</td>
            <td><input id="postal_code" type="text" /></td>
          </tr>
          <tr>
            <td>Provinsi</td>
            <td><input id="administrative_area_level_1" class="form" type="text" /></td>
          </tr>
          <tr>
            <td>Negara</td>
            <td><input id="country" class="form" type="text" /></td>
          </tr>
        </tbody>
      </table>
    </form>
  </body>

</html>

Nah dengan script diatas tadi, outputnya kira-kira begini

form-autocomplete-geocoding

Nah, mudah khan? Selamat mencoba dan semoga bermanfaat. 😀

22 Comments

  1. Nicko Prasetio Nicko Prasetio April 30, 2014

    Halo mas, salam kenal.. sebelumnya terimakasih atas tutorial-tutorial yang sangat bagus sekali di web ini, sangat jelas dan bermutu sekali.. he.. he
    Saya juga kebetulan sedang mengerjakan project berbasis google maps, jadi blog ini benar2 sangat membantu..
    Tetapi ada yang saya mau tanyakan di sini, saya ingin membuat autocompleate yang mengambil data alamat dan tempat dari google.. Nah saya lihat di google developer ada yang namanya Google Place Autocomplete, nah apa bedannya google place autocomplete dan geocoder autocomplete ini??? Maaf jika pertanyaan saya aneh, masi programmer newbie.. he2 thanks gan

    • El Cicko El Cicko Post author | April 30, 2014

      Makasih udah mau berkunjung ke web saya ya mas nicko. sebenernya untuk perbedaan dari Geocoder autocomplete dan Google Place itu sama aja. Intinya kedua fitur itu sama-sama menggunakan Geocoding API untuk pencarian alamat / lokasi. 😀

  2. akang akang Mei 21, 2014

    mas kalo goecodernya tanpa mengisi alamtnya caranya gmna ya?? jdi kita tinggal klik pd peta langsung muncul alamat yg kita klik itu beserta koordinatnya…
    mohon saranya dan contohnya mas..
    terimakasih..

    • El Cicko El Cicko Post author | Mei 22, 2014

      nah, ini yang saya lagi ulik…next post ya mas…sabar sabar 😀

  3. agus salim agus salim Mei 22, 2014

    keren mas.
    mas mau tanya misalkan kita klik pada peta kemudian yg tampil bukan hanya nama jalan saja tapi lang sama lat nya juga tampil di form (text box) itu caranya gmna ya mas..mohon saranya..

  4. christan christan Mei 27, 2014

    Pertanyaan saya sama dengan mas yang diatas, Bagaimana kalo di textboxnya juga nampilin koordinatnya mas, mohon bantuanyya

    • El Cicko El Cicko Post author | Mei 28, 2014

      wah…saya juga masih diulik ulik nich…..next post ya 😀

      • christan christan Mei 28, 2014

        saya sudah berhasil gan, akhirnya saya make jquery geocomplete. Lengkap banget

        makasih gan buat tutorial lainnya,sangat membantu banget buat tugas tugas saya

        • El Cicko El Cicko Post author | Mei 30, 2014

          wah pake jquery geocomplete ya…saya pernah coba…emang bagus koq….sama2 ya mas christian 😀

  5. agus salim agus salim Juni 3, 2014

    mas cris bagi2 contoh geocodingnya donk, katanya udah jadi mas…
    mohon bantuanya yah….

    • christan christan Juni 5, 2014

      minta alamat email nya aja gan, nanti ane kirimin link atau file nya

      • agus salim agus salim Juni 5, 2014

        ini mas emailnya :
        kozek23@gmail.com

        klo punya contoh2 web gis boleh mas di share, saya lg blajar web gis.
        terimakasih mas,

      • distro kabanjahe distro kabanjahe Desember 21, 2014

        mas cris bagi scriptnya dong, saya jg kesulitan mau biikn form alamat pemesanan distro saya.

  6. agus salim agus salim Juni 5, 2014

    ini mas emailnya :
    kozek23@gmail.com

    klo punya contoh2 web gis boleh mas di share, saya lg blajar web gis.
    terimakasih mas,

  7. Yudha Yudha Desember 11, 2014

    Share aja gan, form text box nampiliin latitude sama longitude..

    Tes Masuk Gan

    script src=”http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places” type=”text/javascript”>

    function initialize() {
    var input = document.getElementById(‘searchTextField’);
    var autocomplete = new google.maps.places.Autocomplete(input);
    google.maps.event.addListener(autocomplete, ‘place_changed’, function () {
    var place = autocomplete.getPlace();
    document.getElementById(‘city2’).value = place.name;
    document.getElementById(‘cityLat’).value = place.geometry.location.lat();
    document.getElementById(‘cityLng’).value = place.geometry.location.lng();
    //alert(“This function is working!”);
    //alert(place.name);
    // alert(place.address_components[0].long_name);

    });
    }
    google.maps.event.addDomListener(window, ‘load’, initialize);

    .form {
    width: 300px;
    }

    Geocoder Autocomplete Lat – Long

  8. teguh agustian pasha teguh agustian pasha Juni 26, 2015

    saya minta dong source code nya kang @cristian

  9. […] akurasi daerah tujuan. Untuk Geocoder ini saya pernah tulis di artikel saya tentang bagaimana cara menggunakan Geocoder Autocomplete untuk mengisi form alamat. Sama halnya dengan Traffic Layer atau tampilan Traffic Jalan Raya, saya pernah membahas tentang […]

  10. shandy shandy Oktober 8, 2015

    Ini yang saya cari… mantap tutorialnya…

    udah saya coba mas coding di atas
    tapi pada kolom & kotanya kenapa ga muncul “Kota & Kode Posnya”

    satu lagi mas klo di balik bisa ga ya ??
    cari berdasarkan kode pos
    n hasilnya cuma nama daerah yg sesuai dengan kode pos tersebut

    mohon balasannya mas

    • El Cicko El Cicko Post author | Oktober 9, 2015

      Sayangnya memang ga bisa terlalu akurat mas, tergantung dari Google Mapsnya apakah daerah yang diketik sudah terindeks dengan kodepos atau belum. Untuk pencarian berdasarkan kodepos kayaknya sich belum ada mas dari Google Maps-nya sendiri.

      Perlu diperhatikan bahwa tutorial diatas ini hanya mengandalkan database dari Geocoder Google Maps, ga ada penggunaan database lokal jadi ya kadang memang hasil pencarian ga selalu akurat. 🙁

  11. Mas Deo Mas Deo September 8, 2016

    Keren mas bro…

    Ada uneg2 neh:
    Gmn klo autocomplete dari database mysql.

    Misal saya punya tabel kaya gini:
    id, nama, alamat, lat, long.

    Nah, ketika saya search nama yg ada di database, muncul autocomplete nama trus field yg alamat, lat, long jg otomatis terisi

    Terima ksh

  12. Dendi Dendi Maret 28, 2017

    ———————————————-

    function geolocate() {
    if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
    var geolocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    autocomplete.setBounds(new google.maps.LatLngBounds(geolocation,geolocation));
    });
    }
    }

    ———————————————–
    kalo posisition.coord.lat dan longitude saya ganti manual bisa kan ya ? misal , hanya utk search alamat yg di jakarta , disitu saya isi lat lon posisi di jakarta pusat bisa aja kan ?
    dan 1 lagi mas , klo utk di gabungin sama kalkulasi jarak bisa ga ?

  13. wida wida Januari 15, 2019

    halo mas Cicko.. tanya dong… saya sudah coba coding sesuai literasi di atas… tapi kenapa pilihan alamatnya terbatas ya?

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *