Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Google Maps

Google Maps untuk Android: Dasar

by
Read Time:13 minsLanguages:
This post is part of a series called Getting Started With Google Maps for Android.
Getting Started With Google Maps for Android: Intermediate

Indonesian (Bahasa Indonesia) translation by Andy Nur (you can also view the original English article)

Pengenalan

Tanpa diragukan lagi, peta adalah salah satu alat yang paling berguna bagi pengguna ketika dimasukkan dalam suatu aplikasi. Tutorial ini adalah yang pertama dalam seri yang membahas Google Maps v2 untuk Android. Ini akan mencakup penyiapan Google Maps API melalui Google Developer Console, termasuk fragmen peta di aplikasimu, menampilkan lokasi pengguna, menambahkan penanda, menggambar pada peta, dan beberapa metode umum yang akan menambah utilitas ke aplikasimu.  Semua kode untuk tutorial ini dapat ditemukan di GitHub.

1. Menyiapkan Konsol Pengembang

Untuk menggunakan Google Maps API, kamu harus mendaftarkan aplikasimu di Google Developer Console dan mengaktifkan API-nya. Untuk melakukan ini, memulai dengan pergi ke konsol pengembang Google. Jika Anda sudah memiliki proyek yang dibuat, Anda dapat melewatkan bagian berikutnya. Jika tidak, Anda dapat mengikuti bersama dan membuat proyek baru untuk aplikasi maps Anda.

Langkah 1: Menciptakan sebuah proyek

Untuk membuat proyek baru, klik tombol Create Project berwarna biru di sudut kiri atas layar. Jika kamu tidak melihat tombol Create Project, kemudian cari tombol berlabel Create an empty project.

Create a project buttonCreate a project buttonCreate a project button

Ini menyajikanmu dengan dialog yang menanyakan nama proyek. Untuk tutorial ini, saya telah membuat proyek bernama TutsPlusMaps. Ada beberapa batasan pada apa yang dapat kamu beri nama proyekmu karena hanya karakter huruf, angka, tanda kutip, tanda hubung, spasi, dan tanda seru yang diperbolehkan.

Creating a project dialog windowCreating a project dialog windowCreating a project dialog window

Setelah kamu menekan Create, dialog muncul di sudut kanan bawah halaman dengan loading indikator saat proyek sedang dibuat.

Langkah 2: Mengaktifkan Maps API

Ketika proyek telah dibuat, atau kamu telah memilih proyek yang ada, kamu dibawa ke layar Overview proyek. Dari sini, kamu akan ingin memperluas item APIs & auth di panel navigasi kiri dan klik APIs.

APIs Auth location in navAPIs Auth location in navAPIs Auth location in nav

Meskipun ada kotak pencarian di layar ini, kamu akan melihat bahwa Google menempatkan item Maps API di bagian atas kolom tengah untuk diakses oleh pengembang. Untuk tutorial ini, klik item yang berjudul Google Maps Android API di bawah judul Google Maps APIs.

Google Maps API itemGoogle Maps API itemGoogle Maps API item

Ini membawamu ke layar di mana kamu dapat mengklik tombol Enable API biru untuk mengaktifkan Maps API untuk proyekmu.

Enable API buttonEnable API buttonEnable API button

Langkah 3: Membuat Key API Android

Setelah kamu mengaktifkan Maps API, klik item Credentials di bawah APIs & auth di navigasi samping untuk mendapatkan key untuk mengakses Maps API di aplikasimu. Ketika kamu disajikan dengan dialog Credentials, tekan tombol biru Add Credentials dan pilih API Key.

Dialog for selecting the type of credentials to createDialog for selecting the type of credentials to createDialog for selecting the type of credentials to create

Karena ini adalah aplikasi Android, kamu harus memilih Android Key di dialog berikutnya. Jika kamu membuat aplikasi yang sama menggunakan peta pada platform yang berbeda, kamu dapat membuat key untuk setiap platform.

Dialog for selecting the type of key to generateDialog for selecting the type of key to generateDialog for selecting the type of key to generate

Pada layar berikutnya, klik Add package name and fingerprint. Ini menyediakan dua field, yg satu untuk menambahkan nama paket dan yang lainnya untuk menambahkan SHA1 dari key penandatanganan aplikasimu.

Untuk tutorial ini, saya akan menggunakan nama paket com.tutsplus.mapsdemo. Untuk mendapatkan tanda tangan SHA1, kamu perlu membuka terminal atau command prompt dan arahkan ke lokasi key penandatanganan aplikasimu. Ini bisa berupa key rilis atau debug.keystore mu. Kamu dapat menghasilkan SHA1 dengan perintah berikut:

Screenshot of a terminal output when getting an SHA1 key from a keystoreScreenshot of a terminal output when getting an SHA1 key from a keystoreScreenshot of a terminal output when getting an SHA1 key from a keystore

Setelah kamu membuat key SHA1 dan memasukkannya ke dalam field teks, klik tombol Create berwarna biru. Kamu kemudian disajikan dengan dialog yang berisi key API yang perlu kamu tambahkan ke aplikasi Androidmu untuk mengakses Maps API.

Dialog presenting your Google API keyDialog presenting your Google API keyDialog presenting your Google API key

2. Menyiapkan Proyek Android

Pada titik ini, kamu dapat membuat proyek Android pertama dengan nama paket yang sama dengan yang kamu gunakan untuk membuat key API. Setelah proyekmu dibuat, buka file build.gradle. Kamu perlu mengimpor library Play Services untuk peta. Dalam contoh ini, kamu juga perlu mengimpor lokasi library Play Services untuk menetapkan posisi awal untuk petamu. Tempat baris berikut ke dalam node dependencies dari file build.gradle.

Setelah library-mu diimpor, kamu dapat menutup build.gradle dan membuka file AndroidManifest.xml mu. Di atas node application, kamu perlu menyatakan bahwa aplikasi menggunakan OpenGL ES 2.0 dan menentukan izin yang dibutuhkan oleh aplikasimu.

Perhatikan bahwa izin ACCESS_FINE_LOCATION hanya diperlukan untuk demo ini untuk mendapatkan lokasi pengguna untuk menentukan di mana awalan peta-nya harus ditampilkan. Jika kamu memiliki lokasi yang diketahui di aplikasimu sendiri, tidak perlu menggunakan lokasi pengguna.

Di dalam node application, kamu perlu menambahkan dua bagian metadata. Yang pertama menginformasikan aplikasi yang menggunakan Play Sevices dan yang kedua mengikat key Maps API dengan aplikasimu. Dalam cuplikan kode berikut, @string/google_api_key adalah referensi string untuk key dari Google Developer Console.

Setelah kamu selesai memperbarui AndroidManifest.xml, lanjutkan dan tutup filenya. Selanjutnya, kamu perlu membuat class Java baru, yang disebut MapFragment, yang menjangkau SupportMapFragment. SupportMapFragment digunakan di sini daripada com.google.android.gms.maps.MapFragment untuk menambahkan kompatibilitas ke belekang sebelum API 12.

Jika aplikasimu tidak perlu mendukung perangkat yang menjalankan versi Android yang lebih lama, maka tidak mengapa menggunakan com.google.android.gms.maps.MapFragment. Setelah kamu membuat fragmen dasar, kamu perlu mengimplementasikan enam interface yang akan kita gunakan untuk demo ini.

  • ConnectionCallbacks dan OnConnectionFailedListener dirancang untuk memantau keadaan GoogleApiClient, yang digunakan dalam aplikasi ini untuk mendapatkan lokasi pengguna saat ini.
  • OnInfoWindowClickListener dipicu ketika pengguna mengklik pada jendela info yang muncul di atas penanda pada peta.
  • OnMapLongClickListener dan OnMapClickListener dipicu saat pengguna mengetuk atau menahan pada sebagian dari peta.
  • OnMarkerClickListener dipanggil ketika pengguna mengklik penanda pada peta, yang biasanya juga menampilkan jendela info untuk penanda itu.

Ketika diminta, klik pada bola lampu merah yang muncul di sebelah nama class untuk menambahkan metode yang diperlukan untuk antarmuka ini.

Setelah kamu memiliki fragmen awal yang dibangun, kamu harus membiarkan MainActivity tahu bahwa ia harus menggunakan fragmen ini. Buka activity_main.xml dari folder sumber dayamu dan ubah sehingga menyertakan fragmen sebagai tampilan.

Setelah memperbarui tata letak aktivitasmu, kamu harus dapat menjalankan aplikasimu dan melihat peta Bumi yang sepenuhnya diperbesar dan fokus pada garis lintang 0, bujur 0.

What your screen should look like when Google Maps is initially set up correctlyWhat your screen should look like when Google Maps is initially set up correctlyWhat your screen should look like when Google Maps is initially set up correctly

3. Menginisialisasi Peta

Langkah 1: Mendeklarasikan Jenis Peta

Kembali ke class MapFragment kita, kamu perlu menentukan beberapa nilai global di bagian atas class untuk digunakan dalam aplikasimu.

Di sini mGoogleApiClient dan mCurrentLocation digunakan untuk mendapatkan lokasi pengguna untuk menginisialisasi kamera peta. MAP_TYPES dan curMapTypeIndex digunakan dalam kode contoh untuk beralih antara jenis tampilan peta yang berbeda. Setiap jenis peta melayani tujuan yang berbeda, jadi satu atau lebih mungkin cocok untuk aplikasimu sendiri.

GoogleMap.MAP_TYPE_SATELLITE menampilkan tampilan satelit area tanpa nama atau label jalan.

Example of the Satellite map typeExample of the Satellite map typeExample of the Satellite map type

GoogleMap.MAP_TYPE_NORMAL menampilkan peta generik dengan nama dan label jalan.

Example of the Normal map typeExample of the Normal map typeExample of the Normal map type

GoogleMap.MAP_TYPE_HYBRID menggabungkan mode satelit dan normal, menampilkan gambar satelit dari suatu area dengan semua label.

Example of the Hybrid map typeExample of the Hybrid map typeExample of the Hybrid map type

GoogleMap.MAP_TYPE_TERRAIN mirip dengan peta normal, tetapi tekstur ditambahkan untuk menampilkan perubahan ketinggian dalam lingkungan kerja. Tekstur ini paling terlihat ketika peta miring dengan menyeret dua jari.

Example of the Terrain map typeExample of the Terrain map typeExample of the Terrain map type

GoogleMap.MAP_TYPE_NONE serupa dengan peta normal, tetapi tidak menampilkan label atau warna apa pun untuk jenis lingkungan kerja di suatu area. Ini memungkinkan untuk menampilkan lalu lintas dan overlay lainnya di peta.

Example of the None map typeExample of the None map typeExample of the None map type

Langkah 2: Membuat Klien API

Selanjutnya, kamu perlu membuat GoogleApiClient dan memulai LocationServices untuk mendapatkan lokasi penggunamu saat ini. Seperti yang saya sebutkan sebelumnya, jika kamu memiliki lokasi set yang ingin kamu tampilkan daripada berfokus pada pengguna, kamu dapat melewatinya dengan menggunakan LocationServices.

Metode initListeners mengikat antarmuka yang kamu nyatakan di bagian atas class dengan objek GoogleMap yang terkait dengan SupportMapFragment. Seperti inilah implementasinya:

Kamu mungkin telah memperhatikan bahwa GoogleApiClient dan listener dibuat dan terikat dari onViewCreated daripada tipikal onCreate. Ini karena objek GoogleMap belum diinisialisasi saat onCreate dipanggil, jadi kita perlu menunggu hingga tampilan sepenuhnya dibuat sebelum mencoba memanggil getMap untuk menghindari NullPointerException.

Langkah 3: Mengonfigurasi Peta

Karena kamu akan mengatur kamera peta setelah lokasi pengguna ditemukan melalui Play Services, kita akan menggunakan siklus hidup Play Services untuk mendorong inisialisasi peta kita. Kamu dapat menghubungkan GoogleApiClient di onStart. Ketika klien telah terhubung, kamu dapat mengambil lokasi yang paling terakhir diambil pengguna dan menggunakannya untuk membidik kamera peta.

Dalam metode initCamera, kamu menginisialisasi kamera dan beberapa properti peta dasar. Kamu mulai dengan membuat objek CameraPosition melalui CameraPosition.Builder, dengan target yang ditetapkan untuk lintang dan bujur penggunamu dan tingkat zoom yang ditetapkan.

Kemiringan and bantalan poros digunakan di sini pada nilai default mereka untuk menggambarkan bahwa mereka adalah opsi yang tersedia. Setelah kamu memiliki objek CameraPosition, kamu dapat menganimasikan kamera peta ke posisi itu menggunakan CameraUpdateFactory.

Pada akhir metode ini, kamu akan melihat empat baris terakhir mengatur beberapa properti untuk peta. Kamu mengatur jenis peta, seperti yang dijelaskan sebelumnya dalam tutorial ini, dan mengaktifkan hamparan aliran lalu lintas langsung dalam dua baris pertama. setMyLocationEnabled menambahkan tombol ke pojok kanan atas MapFragment yang secara otomatis memindahkan kamera ke lokasi penggunamu ketika ditekan.

Akhirnya panggil setZoomControlsEnabled tambahkan tombol + dan - di sudut kanan bawah, memungkinkan pengguna untuk mengubah tingkat zoom peta tanpa harus menggunakan gerakan. Ada beberapa hal yang lebih menarik yang dapat kamu atur menggunakan UiSettings, seperti menambahkan kompas atau menonaktifkan gerakan, yang dapat kamu temukan di dokumentasi referensi Android.

4. Menandai Lokasi

Salah satu fitur peta yang paling sering digunakan adalah menandai lokasi dengan penanda. Karena lintang dan bujur diperlukan untuk menambahkan penanda, kamu perlu menggunakan OnMapClickListener untuk memungkinkan pengguna memilih tempat di peta untuk menempatkan objek Marker.

Metode ini membuat penanda merah generik di mana pengguna telah mengetuknya. Opsi tambahan, seperti pengaturan penanda sebagai draggable, dapat diatur melalui objek MarkerOptions. Kamu dapat menemukan atribut tambahan dalam dokumentasi referensi Android resmi. Jika kamu ingin mengubah warna penanda, kamu dapat memanggil BitmapDescriptorFactory.defaultMarker saat menambahkan ikon ke MarkerOptions. Metode defaultMarker menerima nilai float yang mendefinisikan rona-nya. Hue dapat diatur secara manual atau sebagai nilai statis yang telah ditentukan dari BitmapDescriptorFactory. Perlu dicatat bahwa addMarker mengembalikan objek Marker, yang dapat disimpan untuk menghapus penanda khusus secara manual jika diperlukan.

Generic markers placed on the mapGeneric markers placed on the mapGeneric markers placed on the map

Jika kamu ingin menghindari menggunakan pin berwarna generik untuk penanda lokasimu, kamu dapat mengatur bitmap sebagai ikon pada objek MarkerOptions. Untuk mendemonstrasikan ini, kamu perlu mengganti metode onMapLongClick sehingga menggunakan ikon aplikasi dari folder sumber daya sebagai Marker saat penggunamu menekan lama petanya.

Kamu mungkin telah memperhatikan bahwa metode getAddressFromLatLng digunakan di kedua metode klik. Ini adalah metode helper yang menggunakan LatLng dan menjalankannya melalui Geocoder untuk mendapatkan alamat jalan. Pada dua contoh terakhir, kita menggunakan metode ini untuk menampilkan alamat jalan ketika penanda diketuk.

Example of images used as markersExample of images used as markersExample of images used as markers

5. Menggambar di Peta

Objek GoogleMap memiliki seperangkat metode yang memudahkan menggambar bentuk dan menempatkan gambar ke peta. Untuk menggambar lingkaran sederhana, kamu hanya perlu membuat objek CircleOptions, menetapkan radius dan lokasi pusat, dan menentukan warna goresan/isian dan ukuran.

Setelah kamu memiliki objek CircleOptions, kamu dapat memanggil addCircle untuk menggambar lingkaran yang ditentukan di atas peta. Sama seperti saat menempatkan penanda, objek yang digambar di peta mengembalikan objek dari jenis item yang digambar sehingga dapat dirujuk nanti jika diperlukan.

Illustration of a circle drawn programmatically on the mapIllustration of a circle drawn programmatically on the mapIllustration of a circle drawn programmatically on the map

Untuk menggambar bentuk tertutup yang berbeda, kamu dapat mengambil beberapa titik LatLng dan membuat objek PolygonOptions. Seperti yang kamu lihat di bawah ini, PolygonOptions dibuat dengan cara yang sama dengan CircleOptions. Daripada menggunakan metode center dan radius, kamu dapat menggunakan add dengan daftar poin. Kamu kemudian dapat memanggil addPolygon untuk menggambar bentuk. Untuk contoh ini, kamu cukup menggambar segitiga ke peta.

Example of a polygon drawn on the mapExample of a polygon drawn on the mapExample of a polygon drawn on the map

Jenis gambar terakhir yang akan Anda pelajari adalah menambahkan gambar sebagai overlay pada peta. Overlay dapat berguna jika kamu memiliki peta yang digambar untuk area yang ingin kamu tampilkan di atas jenis peta normal. Ini dapat dicapai dengan membuat GroundOverlayOptions dengan set lokasi, lebar dan tinggi, dan gambar yang ingin kamu gunakan sebagai BitmapDescriptor.

Dalam metode berikut, kamu menggambar ikon peluncur untuk aplikasi sebagai overlay pada ubin peta.

Kesimpulan

Dalam tutorial ini, kamu telah belajar cara membuat key API dan mengaktifkan Google Maps untuk Android. Kamu juga belajar tentang class MapFragment dan beberapa fitur dasar yang dapat kamu aktifkan untuk peta.

Kamu telah belajar cara menempatkan penanda, mendengarkan interaksi dengan peta, dan cara menggambar di peta untuk menampilkan informasi tambahan.

Dalam tutorial berikutnya dari seri ini, kamu akan belajar cara melapisi View atas MapFragment, cara berinteraksi dengan peta tingkat dalam ruangan, dan cara menampilkan tampilan jalan untuk penggunamu.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.