Membuat Map pada Aplikasi Flutter

Assalamu’alaikum Warrohmatullahi Wabarokaatuh.

Google map merupakan sesuatu yang sudah tidak asing lagi bagi para pengguna smartphone. Google map merupakan layanan yang dikembangkan oleh Google untuk memberikan informasi seperti peta, perencanaan rute, kondisi lalu lintas, dan juga street view.

Sekarang, saya akan menuliskan langkah-langkah untuk membuat tampilan Google Map pada Flutter.

Seperti biasanya, untuk menggunakan fitur google map pada flutter, kita perlu menggunakan library yang disediakan oleh flutter. Library untuk google maps saat ini masih dalam proses pengembangan, namun bukan berarti kita tidak bisa mencobanya.

Langsung saja ke langkah yang pertama, kita tuliskan library dan versinya yang akan kita pakai di aplikasi flutter kita. Untuk saat ini versi terbarunya adalah versi 0.5.23+1.

google_maps_flutter: ^0.5.23+1

Kita tuliskan kode seperti diatas pada file pubspec.yaml. untuk versinya silahkan gunakan versi terbaru yang tersedia di website resmi flutter.

Setelah kita memasang plugin yang akan kita pakai, selanjutnya kita harus mendapatkan API key untuk google maps di aplikasi kita. API key ini digunakan untuk menentukan layanan apa saja yang kita pakai. Google maps menyediakan layanan yang gratis dan berbayar. Layanan gratis hanyalah map statis dan dinamis, sementara layanan lain seperti geocoding, route, autocomplete membutuhkan biaya per 1000 request.

Kita bisa mendapatkan api key di google cloud platform consolole.

Google menyediakan banyak sekali API yang bisa kita pilih, tapi untuk sekarang kita akan memilih yang ‘Maps SDK for Android’ dan ‘Maps SDK for iOS’.

Langkah berikutnya adalah kita masukan api key ke manifest android dan delegate iOS. Untuk file manifest kita bisa temukan di folder app/src/debug/AndroidManifest.xml. Sedangkan file delegate bisa kita temukan di ios/Runner/AppDelegate.swift.

Kita tambahkan kode seperti gambar dibawah ini.

Untuk bagian android:value, silahkan anda masukan API key masing-masing. Kemudian untuk iOS tambahkan kode seperti gambar dibawah.

Pada bagian GMSServices.provideAPIKey(“”) tambahkan API key masing-masing.

 

Setelah kita selesai mengkonfigurasi library yang akan kita gunakan, selanjutnya kita akan mulai koding.

Kita tambahkan kode diatas pada statefull widget kita. Dari gambar diatas, yang saya beri garis bawah biru adalah koordinat dari lokasi yang akan menjadi fokus dari map yang akan ditampilkan, kemudian pada bagian yang saya beri garis bawah merah berfungsi untuk mendefinisikan besaran zoom pada map yang ditampilkan.

Nah langsung saja kita coba jalankan aplikasinya.

Setelah aplikasinya dijalankan, pasti hanya memunculkan map biasa yang menampilkan daerah sekitar dari koordinat yang anda masukan.

Kemudian kita coba masukan marker atau penanda ke peta yang sudah kita buat.

Pertama-tama kita buat variabel bertipe data Set pada state widget kita. Untuk lebih jelasnya silahkan tuliskan seperti dibawah ini.

final Set _markers = {};

 

Kemudian Override initstate pada state widget kita. Kemudian tambahkan perintah Marker.add(). Untuk lebih jelasnya silahkan simak gambar dibawah.

Nah langkah selanjutnya adalah menambahkan pengaturan marker pada map yang sudah dibuat. Langsung tambahkan kode dibawah setelah perintah zoom seperti pada gambar sebelumnya.

markers: _markers,

 

Nah setelah dicoba lagi maka akan muncul marker seperti yang muncul pada aplikasi google map.

 

Untuk sekarang tutorialnya hanya sampai sini dulu guys. Sebenernya masih banyak lagi fitur yang bisa diaplikasikan dari google maps ini, namun fitur yang lain mengharuskan developer untuk membayar per 1000 request dari aplikasi. Karena hal ini saya hanya membuat tutorial sampai sini dulu guys.

Terimakasih sudah membaca.