Menggunakan Geocoder Autocomplete Untuk Mengisi Form Alamat

Dipublikasikan oleh El Cicko pada

geocoding fill address
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. 😀


El Cicko

Nama saya Riky Fahri Hasibuan, Saya yang biasa nulis di blog ini. Blog ini adalah sarana dokumentasi dari apa yang saya kerjakan dan tidak ada salahnya juga saya sebarkan. Jika artikel di blog bermanfaat, kamu bisa memberikan apresiasi pada blog ini dengan memberikan donasi pada blog ini.

22 Komentar

Nicko Prasetio · April 30, 2014 pada 10:22 am

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 · April 30, 2014 pada 3:08 pm

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

akang · Mei 21, 2014 pada 1:22 am

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 · Mei 22, 2014 pada 2:12 pm

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

agus salim · Mei 22, 2014 pada 5:38 am

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

christan · Mei 27, 2014 pada 11:34 am

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

    El Cicko · Mei 28, 2014 pada 12:44 am

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

      christan · Mei 28, 2014 pada 3:03 am

      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 · Mei 30, 2014 pada 1:39 pm

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

agus salim · Juni 3, 2014 pada 1:50 am

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

    christan · Juni 5, 2014 pada 5:54 pm

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

      agus salim · Juni 5, 2014 pada 6:33 pm

      ini mas emailnya :
      kozek23@gmail.com

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

      distro kabanjahe · Desember 21, 2014 pada 12:45 pm

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

agus salim · Juni 5, 2014 pada 6:31 pm

ini mas emailnya :
kozek23@gmail.com

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

Yudha · Desember 11, 2014 pada 4:26 am

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

teguh agustian pasha · Juni 26, 2015 pada 8:56 am

saya minta dong source code nya kang @cristian

shandy · Oktober 8, 2015 pada 7:47 pm

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 · Oktober 9, 2015 pada 6:24 am

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

Mas Deo · September 8, 2016 pada 5:50 pm

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

Dendi · Maret 28, 2017 pada 6:05 pm

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

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 ?

wida · Januari 15, 2019 pada 2:11 am

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

Menampilkan Google Maps Directions Dengan Geolocation · Agustus 24, 2015 pada 11:49 pm

[…] 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 […]

Tinggalkan Balasan

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