Cara cepat menggunakan Google Maps Platform places autocomplete

24 May 2021

Peta adalah gambar atau lukisan pada kertas dan sebagainya yang menunjukkan letak tanah. Peta bisa disajikan dalam berbagai cara yang berbeda, mulai dari peta konvensional yang tercetak hingga peta digital yang tampil di layar komputer hingga aplikasi pada smartphone. Mari mendalami bagaimana cara menggunakan Google Maps Platform places autocomplete untuk Aplikasi Anda khususnya di Android.

Istilah peta berasal dari bahasa Yunani “mappa” yang berarti taplak atau kain penutup meja. Namun secara umum pengertian peta adalah gambaran seluruh atau sebagian permukaan bumi pada bidang datar yang diperkecil dengan menggunakan skala tertentu. Sebuah peta adalah representasi dua dimensi dari suatu ruang tiga dimensi. Banyak peta mempunyai skala, yang menentukan seberapa besar objek pada peta dalam keadaan yang sebenarnya.

Lalu, untuk melengkapi pembahasan mengenai peta (maps), siapa yang yang tidak tahu dengan Google Maps, hampir semua orang familiar dengan salah satu platform layanan pemetaan web yang dikembangkan oleh Google ini.

Beberapa layanan yang sering kali digunakan adalah citra satelit, peta jalan, panorama 360°, kondisi lalu lintas, dan perencanaan rute untuk bepergian dengan berjalan kaki, mobil, sepeda, atau angkutan umum.

Google Maps API merupakan pengembangan teknologi dari Google yang digunakan untuk menanamkan Google Map di suatu aplikasi yang tidak dibuat oleh Google.

Google Maps API adalah suatu library yang berbentuk javascript yang berguna untuk memodifikasi peta yang ada di Google Maps sesuai kebutuhan.

Menggunakan Google Maps Platform dan dalam perkembangannya Google Maps API diberikan kemampuan untuk mengambil gambar peta statis. Melakukan geocoding (men convert alamat ke titik koordinat, atau sebaliknya titik koordinat menjadi alamat dengan reverse-geocoding), dan memberikan penuntun arah dan lain sebagainya.

Table of Contents

Google Maps API bersifat gratis untuk publik

Kekurangan yang ada pada Google Maps API yaitu jika ingin melakukan akses harus terdapat layanan internet pada perangkat yang digunakan. Sedangkan untuk kelebihan yang ada pada Google Maps API yaitu:

Dukungan penuh yang dilakukan Google sehingga terjamin dan bervariasi fitur yang ada pada Google Maps API.
Banyak pengembang yang menggunakan Google Maps API sehingga mudah dalam mencari referensi dalam pengembangan aplikasi

Lalu bagaimana cara implementasi untuk menggunakan Google Maps platform di aplikasi Android

Salah satu SKU yang dapat diimplementasikan pada saat menggunakan Google Maps platform adalah Places Autocomplete.

Layanan pelengkapan otomatis (Autocomplete service) di Places SDK untuk Android menampilkan prediksi tempat sebagai tanggapan atas kueri penelusuran pengguna.

Saat pengguna mengetik, layanan pelengkapan otomatis (autocomplete service) mengembalikan saran untuk tempat-tempat seperti bisnis, alamat, kode plus, dan tempat menarik.

Pada saat pengembangan sistem aplikasi yang menggunakan google maps platform dapat menambahkan pelengkapan otomatis (autocomplete) ke aplikasi dengan cara berikut:

Tambahkan widget pelengkapan otomatis (autocomplete widget) untuk menghemat waktu pengembangan dan memastikan pengalaman pengguna yang konsisten.
Dapatkan prediksi tempat secara terprogram untuk menciptakan pengalaman pengguna yang disesuaikan.

Untuk lebih detailnya mari kita bahas satu-satu langkah untuk menggunakan Google Maps Platform dalam pengimplementasian Places Autocomplete di Android:

Tambahkan widget pelengkapan otomatis (autocomplete widget)

Autocomplete Widget adalah dialog pencarian dengan fungsi pelengkapan otomatis bawaan. Saat pengguna memasukkan istilah penelusuran, widget menampilkan daftar prediksi tempat untuk dipilih.

Saat pengguna membuat pilihan, instance Place dikembalikan, yang kemudian dapat digunakan aplikasi untuk mendapatkan detail tentang tempat yang dipilih.

Ada dua opsi untuk menambahkan widget pelengkapan otomatis ke aplikasi:

Opsi 1: Menyematkan AutocompleteSupportFragment

Untuk menambahkan AutocompleteSupportFragment ke aplikasi, lakukan langkah-langkah berikut:

Tambahkan fragment ke layout activity’s XML.
Tambahkan AutocompleteSupportFragment ke activity.

Untuk menambahkan AutocompleteSupportFragment ke aktifitas, tambahkan fragmen baru ke layout XML. Sebagai contoh:

Secara default, fragment tidak memiliki batas atau latar belakang. Untuk memberikan tampilan visual yang konsisten, tingkatkan fragment dalam elemen tata letak lain seperti CardView.

Jika menggunakan Autocomplete fragment, dan perlu mengganti onActivityResult, harus memanggil super.onActivityResult, jika tidak, fragment tidak akan berfungsi dengan baik.

Tambahkan Listener ke activity atau fragment.
Tambahkan PlaceSelectionListener ke aktivitas

PlaceSelectionListener menangani pengembalian tempat sebagai respons terhadap pilihan pengguna. Source code berikut menunjukkan pembuatan referensi ke fragmen dan menambahkan listener ke AutocompleteSupportFragment:

Menggunakan Java

Menggunakan Kotlin

// Initialize the AutocompleteSupportFragment.
AutocompleteSupportFragment autocompleteFragment = (AutocompleteSupportFragment)        getSupportFragmentManager().findFragmentById(R.id.autocomplete_fragment);

// Specify the types of place data to return.    autocompleteFragment.setPlaceFields(Arrays.asList(Place.Field.ID, Place.Field.NAME));
// Set up a PlaceSelectionListener to handle the response.    autocompleteFragment.setOnPlaceSelectedListener(new PlaceSelectionListener() {        @Override        public void onPlaceSelected(@NonNull Place place) {            // TODO: Get info about the selected place.            Log.i(TAG, “Place: ” + place.getName() + “, ” + place.getId());        }

        @Override        public void onError(@NonNull Status status) {            // TODO: Handle the error.            Log.i(TAG, “An error occurred: ” + status);        }    });

// Initialize the AutocompleteSupportFragment.    val autocompleteFragment =        supportFragmentManager.findFragmentById(R.id.autocomplete_fragment)            as AutocompleteSupportFragment
// Specify the types of place data to return.    autocompleteFragment.setPlaceFields(listOf(Place.Field.ID, Place.Field.NAME))
// Set up a PlaceSelectionListener to handle the response.    autocompleteFragment.setOnPlaceSelectedListener(object : PlaceSelectionListener {        override fun onPlaceSelected(place: Place) {            // TODO: Get info about the selected place.            Log.i(TAG, “Place: ${place.name}, ${place.id}”)        }
        override fun onError(status: Status) {            // TODO: Handle the error.            Log.i(TAG, “An error occurred: $status”)        }    })

**Opsi 2: Gunakan intent untuk launch autocomplete activity**

Jika ingin aplikasi menggunakan alur navigasi (navigational flow) yang berbeda (misalnya, untuk memicu pengalaman autocomplete dari ikon, bukan dari bidang penelusuran), aplikasi bisa launch autocomplete (pelengkapan otomatis) dengan menggunakan intent.

Untuk menggunakan autocomplete widget dengan intent, ikuti langkah-langkah berikut:

Gunakan Autocomplete. IntentBuilder untuk membuat intent, meneruskan mode Autocomplete yang diinginkan. Intent harus memanggil startActivityForResult, dengan meneruskan kode permintaan yang mengidentifikasi intent tersebut.

Contoh di bawah ini menunjukkan penggunaan Autocomplete.IntentBuilder untuk membuat intent untuk menggunakan Autocomplete widget.

Menggunakan Java

Menggunakan Kotlin

private static int AUTOCOMPLETE_REQUEST_CODE = 1;
// Set the fields to specify which types of place data to// return after the user has made a selection.
List<Place.Field> fields = Arrays.asList(Place.Field.ID, Place.Field.NAME);
// Start the autocomplete intent.
Intent intent = new Autocomplete.IntentBuilder(AutocompleteActivityMode.FULLSCREEN, fields) .build(this); startActivityForResult(intent, AUTOCOMPLETE_REQUEST_CODE);

private val AUTOCOMPLETE_REQUEST_CODE = 1
// Set the fields to specify which types of place data to// return after the user has made a selection. val fields = listOf(Place.Field.ID, Place.Field.NAME)
// Start the autocomplete intent. val intent = Autocomplete.IntentBuilder(AutocompleteActivityMode.FULLSCREEN, fields) .build(this) startActivityForResult(intent, AUTOCOMPLETE_REQUEST_CODE)

Saat menggunakan intent untuk launch autocomplete widget dapat memilih dari mode tampilan layar penuh atau overlay. Tampilan berikut menunjukkan masing-masing mode tampilan:

Gambar 1: Widget pelengkapan otomatis dalam mode OVERLAY

Gambar 2: Widget pelengkapan otomatis dalam mode FULLSCREEN

Ganti callback onActivityResult untuk menerima tempat yang dipilih.

Untuk menerima pemberitahuan ketika pengguna telah memilih tempat, aplikasi harus mengganti onActivityResult (), memeriksa kode permintaan yang telah diteruskan untuk intent yang sudah dibuat, seperti yang ditunjukkan dalam contoh berikut.

Menggunakan Java

Menggunakan Kotlin

@Overrideprotected void onActivityResult(int requestCode, int resultCode, @Nullable Intent data) { if (requestCode == AUTOCOMPLETE_REQUEST_CODE) { if (resultCode == RESULT_OK) { Place place = Autocomplete.getPlaceFromIntent(data); Log.i(TAG, “Place: ” + place.getName() + “, ” + place.getId()); } else if (resultCode == AutocompleteActivity.RESULT_ERROR) { // TODO: Handle the error. Status status = Autocomplete.getStatusFromIntent(data); Log.i(TAG, status.getStatusMessage()); } else if (resultCode == RESULT_CANCELED) { // The user canceled the operation. } return; } super.onActivityResult(requestCode, resultCode, data);}

override fun onActivityResult(requestCode: Int, resultCode: Int, data: Intent?) { if (requestCode == AUTOCOMPLETE_REQUEST_CODE) { when (resultCode) { Activity.RESULT_OK -> { data?.let { val place = Autocomplete.getPlaceFromIntent(data) Log.i(TAG, “Place: ${place.name}, ${place.id}”) } } AutocompleteActivity.RESULT_ERROR -> { // TODO: Handle the error. data?.let { val status = Autocomplete.getStatusFromIntent(data) Log.i(TAG, status.statusMessage) } } Activity.RESULT_CANCELED -> { // The user canceled the operation. } } return } super.onActivityResult(requestCode, resultCode, data)}

Mendapatkan prediksi tempat secara terprogram dalam menggunakan Google Maps Platform

Membuat UI penelusuran khusus sebagai alternatif dari UI yang disediakan oleh autocomplete widget. Untuk melakukan ini harus mendapatkan prediksi tempat secara terprogram.

Aplikasi bisa mendapatkan daftar prediksi nama tempat dan/atau alamat dari autocomplete API dengan memanggil PlacesClient.findAutocompletePredictions (), meneruskan objek FindAutocompletePredictionsRequest dengan parameter berikut:

Diperlukan	String kueri yang berisi teks yang diketik oleh pengguna.
Direkomendasikan	AutocompleteSessionToken, yang mengelompokkan fase kueri dan pemilihan penelusuran pengguna ke dalam sesi terpisah untuk tujuan penagihan. Sesi dimulai saat pengguna mulai mengetik kueri, dan diakhiri saat mereka memilih tempat.Objek RectangularBounds, yang menentukan garis lintang dan garis bujur untuk membatasi hasil ke wilayah yang ditentukan
Opsional	Satu atau beberapa kode negara dua huruf (ISO 3166-1 Alpha-2), yang menunjukkan negara atau negara tempat hasil harus dibatasi.TypeFilter, yang bisa digunakan untuk membatasi hasil ke tipe tempat yang ditentukan. Jenis tempat berikut ini didukung:TypeFilter.GEOCODE Hanya mengembalikan hasil geocoding, bukan bisnis. Gunakan permintaan ini untuk membedakan hasil jika lokasi yang ditentukan mungkin tidak dapat ditentukan.TypeFilter.ADDRESS Hanya mengembalikan hasil pelengkapan otomatis dengan alamat yang tepat. Gunakan jenis ini jika tahu pengguna mencari alamat yang ditentukan secara lengkap.TypeFilter.ESTABLISHMENT Hanya mengembalikan tempat yang merupakan bisnis.TypeFilter.REGIONS Hanya mengembalikan tempat yang cocok dengan salah satu tipe berikut ini:LOCALITYSUBLOCALITYPOSTAL_CODECOUNTRYADMINISTRATIVE_AREA_LEVEL_1ADMINISTRATIVE_AREA_LEVEL_2TypeFilter.CITIES Hanya mengembalikan hasil yang cocok dengan LOCALITY atau ADMINISTRATIVE_AREA_LEVEL_3.LatLng yang menentukan lokasi asal permintaan. Saat memanggil setOrigin (), layanan mengembalikan jarak dalam meter (distanceMeters) dari asal yang ditentukan, untuk setiap prediksi pelengkapan otomatis dalam respons

Contoh di bawah ini menunjukkan panggilan lengkap ke PlacesClient.findAutocompletePredictions ().

Menggunakan Java

Menggunakan Kotlin

// Create a new token for the autocomplete session. Pass this to FindAutocompletePredictionsRequest,    // and once again when the user makes a selection (for example when calling fetchPlace()).
    AutocompleteSessionToken token = AutocompleteSessionToken.newInstance();
    // Create a RectangularBounds object.
    RectangularBounds bounds = RectangularBounds.newInstance(        new LatLng(-33.880490, 151.184363),        new LatLng(-33.858754, 151.229596));
    // Use the builder to create a FindAutocompletePredictionsRequest.
    FindAutocompletePredictionsRequest request = FindAutocompletePredictionsRequest.builder()        // Call either setLocationBias() OR setLocationRestriction().        .setLocationBias(bounds)        //.setLocationRestriction(bounds)        .setOrigin(new LatLng(-33.8749937,151.2041382))        .setCountries(“AU”, “NZ”)        .setTypeFilter(TypeFilter.ADDRESS)        .setSessionToken(token)        .setQuery(query)        .build();
    placesClient.findAutocompletePredictions(request).addOnSuccessListener((response) -> {        for (AutocompletePrediction prediction : response.getAutocompletePredictions()) {            Log.i(TAG, prediction.getPlaceId());            Log.i(TAG, prediction.getPrimaryText(null).toString());        }    }).addOnFailureListener((exception) -> {        if (exception instanceof ApiException) {            ApiException apiException = (ApiException) exception;            Log.e(TAG, “Place not found: ” + apiException.getStatusCode());        }    });

// Create a new token for the autocomplete session. Pass this to FindAutocompletePredictionsRequest,    // and once again when the user makes a selection (for example when calling fetchPlace()).
    val token = AutocompleteSessionToken.newInstance()
    // Create a RectangularBounds object.
    val bounds = RectangularBounds.newInstance(        LatLng(-33.880490, 151.184363),        LatLng(-33.858754, 151.229596)    )    // Use the builder to create a FindAutocompletePredictionsRequest.
    val request =    FindAutocompletePredictionsRequest.builder()            // Call either setLocationBias() OR setLocationRestriction().            .setLocationBias(bounds)            //.setLocationRestriction(bounds)            .setOrigin(LatLng(-33.8749937, 151.2041382))            .setCountries(“AU”, “NZ”)            .setTypeFilter(TypeFilter.ADDRESS)            .setSessionToken(token)            .setQuery(query)            .build()    placesClient.findAutocompletePredictions(request)        .addOnSuccessListener { response: FindAutocompletePredictionsResponse ->            for (prediction in response.autocompletePredictions) {                Log.i(TAG, prediction.placeId)                Log.i(TAG, prediction.getPrimaryText(null).toString())            }        }.addOnFailureListener { exception: Exception? ->            if (exception is ApiException) {                Log.e(TAG, “Place not found: ” + exception.statusCode)            }        }

API mengembalikan FindAutocompletePredictionsResponse yang berisi daftar objek AutocompletePrediction yang mewakili tempat yang diprediksi.

Daftar mungkin kosong, jika tidak ada tempat yang diketahui sesuai dengan kueri dan kriteria filter.

Untuk setiap tempat yang diprediksi, dapat memanggil metode berikut untuk mengambil detail tempat:

getFullText (CharacterStyle)

Mengembalikan teks lengkap dari deskripsi tempat. Ini adalah kombinasi dari teks primer dan sekunder.

Contoh: “Menara Eiffel, Avenue Anatole France, Paris, Prancis”.

Selain itu, metode ini memungkinkan menyorot bagian deskripsi yang cocok dengan pencarian dengan gaya pilihan, menggunakan CharacterStyle.

Parameter CharacterStyle adalah opsional. Setel ke nol jika tidak memerlukan penyorotan apa pun.

getPrimaryText (CharacterStyle)

Mengembalikan teks utama yang mendeskripsikan tempat. Biasanya ini adalah nama tempatnya.

Contoh: “Menara Eiffel”, dan “123 Pitt Street”.

getSecondaryText (CharacterStyle)

Mengembalikan teks tambahan dari deskripsi tempat. Ini berguna, misalnya, sebagai baris kedua saat menampilkan prediksi pelengkapan otomatis.

Contoh: “Avenue Anatole France, Paris, Prancis”, dan “Sydney, New South Wales”.

getPlaceId ()

Mengembalikan ID tempat dari tempat yang diprediksi. Places ID adalah pengenal tekstual yang secara unik mengidentifikasi tempat, yang bisa digunakan untuk mengambil kembali objek Place nanti.

Untuk informasi selengkapnya tentang Places ID di Places SDK untuk Android, lihat Detail Tempat. Untuk informasi umum tentang ID tempat, lihat ringkasan Places ID.

getPlaceTypes ()

Mengembalikan daftar tipe tempat yang terkait dengan tempat ini.

getDistanceMeters ()

Mengembalikan jarak garis lurus dalam meter antara tempat ini dan asal yang ditentukan dalam permintaan.

Terralogiq sebagai satu-satunya Google Maps Premier Partner di Indonesia bertujuan membantu bisnis anda untuk meningkatkan efisiensi proses bisnis dengan mengintegrasikan Google Maps Platform dan menyederhanakan penerapan Google Maps API dan SDK.

Untuk arahan menggunakan Google Maps Platform, atau jika Anda memerlukan bantuan dalam mengimplementasikan Google Maps Platform APIs untuk solusi bisnis aplikasi serta membutuhkan dukungan teknis dan informasi lainnya mengenai Google Maps Platform. Anda dapat menghubungi kami di halo@terralogiq.com

Semoga bisa membantu. Terima kasih sudah membaca artikel kali ini, tunggu update terbaru pembahasan artikel selanjutnya yaa..

Cara cepat menggunakan Google Maps Platform places autocomplete

Google Maps API bersifat gratis untuk publik

Lalu bagaimana cara implementasi untuk menggunakan Google Maps platform di aplikasi Android

Tambahkan widget pelengkapan otomatis (autocomplete widget)

Opsi 1: Menyematkan AutocompleteSupportFragment

**Opsi 2: Gunakan intent untuk launch autocomplete activity**

Mendapatkan prediksi tempat secara terprogram dalam menggunakan Google Maps Platform

Related Article

Menjawab tantangan retail dan e-commerce dengan location intelligence

Penerapan Google Maps Platform dari Google I/O 2021