Menggunakan Geocoder Autocomplete Untuk Mengisi Form Alamat

geocoding-fill-addressHai, 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

Nah dengan script diatas tadi, outputnya kira-kira begini

form-autocomplete-geocoding

Nah, mudah khan? 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

21 tanggapan 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

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

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

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

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

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

  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

  6. Pingback: Menampilkan Google Maps Directions Dengan Geolocation

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

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

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

  9. ———————————————-

    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 ?

Tinggalkan Balasan