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 pemikiran pada “Menggunakan Geocoder Autocomplete Untuk Mengisi Form Alamat”

  1. 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

    Balas
    • 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. 😀

      Balas
  2. 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..

    Balas
  3. 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..

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

    Balas
  5. 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

    Balas
  6. 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

    Balas
    • 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. 🙁

      Balas
  7. 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

    Balas
  8. ———————————————-

    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 ?

    Balas

Tinggalkan komentar