Google Places Autocomplete dengan Ionic

2018-01-24 05:49:59

Google places autocompletion sebenarnya adalah API yang disediakan oleh google. API ini dapat kita akses dari aplikasi apa aja karena berbentuk RestAPI termasuk aplikasi yang kita buat menggunakan Ionic Framework.


Untuk dapat mengakses API google places, anda perlu login ke google developer https://developers.google.com/places/web-service/autocomplete dan dapatkan API Key disana.


Selanjutnya kita bisa mulai koding. Anda tentu bisa saja mengakses Google Places API dengan request menggunakan Http di Ionic dan menghandle resultnya dengan logic anda sendiri sesuai kebutuhan. Tapi berita baiknya saat ini udah ada plugin untuk Google Places Autocomplete di Ionic. Anda bisa menggunakan plugin Ionic2-google-palces-autocomplete. Berikut ini adalah langkah-langkah menggunakannya.

Buat Project Baru

$ ionic start GoogleAutoComplete blank

Jika proses membuat projectnya sudah selesai, selanjutnya masuk ke dalam folder aplikasi kita dan install pluginnya.

$ cd GoogleAutoComplete

$ npm install --save ionic2-google-places-autocomplete

Setelah proses instalasi plugin selesai silahkan buka projectnya dengan editor kesayangan anda. Saya menggunakan Visual Studio Code. Buka file app.module.ts dan sesuaikan isi filenya sesuai contoh berikut, kita akan mengimport pluginnya.


Selanjutnya buka file home.html dan sesuaikan isinya seperti berikut


Silahkan sesuaikan GOOGLE_API_KEY yang anda peroleh dari google developer console.

Dan yang terakhir, kita menghandle event saat kita memilih salah satu suggestion yang ada. Untuk contoh ini kita log aja ke console.


Silahkan jalankan aplikasi anda menggunakan real device atau emulator.

$ ionic cordova run android