Android di Kotlin 04.1 Lanjutan: Android Google Maps

Codelab ini adalah bagian dari kursus Android Lanjutan di Kotlin. Anda akan mendapatkan manfaat maksimal dari kursus ini jika menyelesaikan codelab secara berurutan, tetapi ini tidak bersifat wajib. Semua codelab kursus tercantum di halaman landing codelab Android Lanjutan di Kotlin.

Codelab ini adalah bagian dari rangkaian yang memandu Anda dalam menambahkan peta ke aplikasi. Sebaiknya pelajari semua codelab secara berurutan, karena Anda perlu menyelesaikan setiap tugas langkah demi langkah.

Codelab dalam seri ini adalah:

• 4.1 Google Maps Android
• 4.2 Menambahkan Pembatasan Wilayah ke Peta Anda

Membangun aplikasi dengan Google Maps memungkinkan Anda menambahkan fitur ke aplikasi, seperti citra satelit, kontrol UI yang andal untuk peta, pelacakan lokasi, dan penanda lokasi. Anda dapat menambahkan nilai ke Google Maps standar dengan menampilkan informasi dari set data Anda sendiri, seperti lokasi area memancing atau mendaki yang terkenal. Anda juga dapat membuat game yang memungkinkan pemain menjelajahi dunia fisik, seperti dalam perburuan harta karun atau bahkan game augmented reality.

Dalam pelajaran ini, Anda akan membuat aplikasi Google Maps bernama Wander yang menampilkan peta yang disesuaikan dan menunjukkan lokasi pengguna.

Prasyarat

Pengetahuan tentang hal-hal berikut:

• Cara membuat aplikasi Android dasar dan menjalankannya menggunakan Android Studio.
• Cara membuat dan mengelola resource, seperti string.
• Cara memfaktorkan ulang kode dan mengganti nama variabel menggunakan Android Studio.
• Cara menggunakan peta Google sebagai pengguna.
• Cara menyetel izin waktu proses.

Yang akan Anda pelajari

• Cara mendapatkan kunci API dari Konsol API Google dan mendaftarkan kunci ke aplikasi Anda
• Cara mengintegrasikan Google Maps di aplikasi Anda
• Cara menampilkan berbagai jenis peta
• Cara menentukan gaya Google Map
• Cara menambahkan penanda ke peta
• Cara mengizinkan pengguna menempatkan penanda pada lokasi menarik (POI)
• Cara mengaktifkan pelacakan lokasi
• Cara membuat aplikasi Wander, yang memiliki Google Map yang disematkan
• Cara membuat fitur kustom untuk aplikasi Anda, seperti penanda dan gaya
• Cara mengaktifkan pelacakan lokasi di aplikasi Anda

Dalam codelab ini, Anda akan membuat aplikasi Wander, yang menampilkan peta Google dengan gaya kustom. Aplikasi Wander memungkinkan Anda menjatuhkan penanda ke lokasi, menambahkan overlay, dan melihat lokasi Anda secara real time.

Maps SDK for Android memerlukan kunci API. Untuk mendapatkan kunci API, daftarkan project Anda di halaman API & Services. Kunci API terikat ke sertifikat digital yang menautkan aplikasi ke penulisnya. Untuk mengetahui informasi selengkapnya tentang penggunaan sertifikat digital dan penandatanganan aplikasi, lihat Menandatangani aplikasi.

Dalam codelab ini, Anda akan menggunakan kunci API untuk sertifikat debug. Sertifikat debug tidak aman berdasarkan desainnya, seperti yang dijelaskan dalam Menandatangani build debug Anda. Aplikasi Android yang dipublikasikan dan menggunakan Maps SDK for Android memerlukan kunci API kedua: kunci untuk sertifikat rilis. Untuk mengetahui informasi selengkapnya tentang cara mendapatkan sertifikat rilis, lihat Mendapatkan Kunci API.

Android Studio menyertakan template Aktivitas Google Maps, yang menghasilkan kode template yang berguna. Kode template mencakup file google_maps_api.xml yang berisi link yang menyederhanakan perolehan kunci API.

Catatan: Jika Anda ingin membuat aktivitas tanpa menggunakan template, ikuti langkah-langkah di Mendapatkan Kunci API untuk mendapatkan kunci API tanpa menggunakan link di template.

Langkah 1: Buat project Wander dengan template peta

1. Buat project Android Studio baru.
2. Pilih template Aktivitas Google Maps.

3. Beri nama project Wander.
4. Tetapkan level API minimum ke API 19. Pastikan bahasanya adalah Kotlin.
5. Klik Selesai.
6. Setelah aplikasi selesai dibuat, lihat project Anda dan file terkait peta berikut yang dibuat Android Studio untuk Anda:

google_maps_api.xml—Anda menggunakan file konfigurasi ini untuk menyimpan kunci API Anda. Template ini menghasilkan dua file google_maps_api.xml: satu untuk debug dan satu untuk rilis. File untuk kunci API sertifikat debug terletak di src/debug/res/values. File untuk kunci API sertifikat rilis terletak di src/release/res/values. Dalam codelab ini, Anda hanya menggunakan sertifikat debug.

activity_maps.xml—File tata letak ini berisi satu fragmen yang mengisi seluruh layar. Class SupportMapFragment adalah subclass dari class Fragment. SupportMapFragment adalah cara paling sederhana untuk menempatkan peta di aplikasi. Ini adalah wrapper di sekitar tampilan peta untuk menangani kebutuhan siklus proses yang diperlukan secara otomatis.

Anda dapat menyertakan SupportMapFragment dalam file tata letak menggunakan tag <fragment> di ViewGroup mana pun, dengan atribut name tambahan.

android:name="com.google.android.gms.maps.SupportMapFragment"

MapsActivity.java—File MapsActivity.kt membuat instance SupportMapFragment dalam metode onCreate(), dan menggunakan getMapAsync() kelas untuk menginisialisasi sistem peta dan tampilan secara otomatis. Aktivitas yang berisi SupportMapFragment harus menerapkan antarmuka OnMapReadyCallback dan metode onMapReady() antarmuka tersebut. Metode onMapReady() dipanggil saat peta dimuat.

Catatan: Jika Anda menjalankan aplikasi sekarang, peta akan gagal dimuat. Jika Anda melihat log, Anda akan melihat pesan yang menyatakan bahwa kunci API Anda tidak disiapkan dengan benar. Pada langkah berikutnya, Anda akan mendapatkan kunci API untuk membuat aplikasi menampilkan peta.

Catatan: Jika Anda menguji aplikasi Wander di emulator, Anda harus menggunakan image sistem yang menyertakan Google Play. Pilih gambar yang menampilkan Google Play di kolom Target pada daftar perangkat virtual.

Langkah 2: Dapatkan kunci API

1. Buka file google_maps_api.xml versi debug.
2. Dalam file, cari komentar dengan URL yang panjang. Parameter URL mencakup informasi spesifik tentang aplikasi Anda.
3. Salin dan tempel URL ke browser.
4. Ikuti perintah untuk membuat project di halaman API & Layanan. Karena parameter dalam URL yang diberikan, halaman akan otomatis mengaktifkan Maps SDK for Android.
5. Klik Buat Kunci API.
6. Di halaman berikutnya, buka bagian Kunci API, lalu klik kunci yang baru saja Anda buat.
7. Klik Batasi Kunci dan pilih Maps SDK for Android untuk membatasi penggunaan kunci pada aplikasi Android.
8. Salin kunci API yang dibuat. Nama ini diawali dengan "AIza".
9. Di file google_maps_api.xml, tempelkan kunci ke dalam string google_maps_key di tempat yang bertuliskan YOUR_KEY_HERE.
10. Jalankan aplikasi Anda. Anda akan melihat peta yang disematkan di aktivitas Anda dengan penanda yang ditetapkan di Sydney, Australia. (Penanda Sydney adalah bagian dari template dan Anda dapat mengubahnya nanti.)

Catatan: Kunci API mungkin memerlukan waktu hingga 5 menit untuk diterapkan. Anda mungkin juga perlu memulai ulang Android Studio.

Langkah 3: Ganti nama mMap

MapsActivity memiliki lateinit var pribadi bernama mMap, yang berjenis GoogleMap. Untuk mengikuti konvensi penamaan Kotlin, ubah nama mMap menjadi map.

1. Di MapsActivity, klik kanan mMap, lalu klik Refactor > Rename...

2. Ubah nama variabel menjadi map.

Perhatikan bagaimana semua referensi ke mMap dalam fungsi onMapReady() juga berubah menjadi map.

Google Maps menyertakan beberapa jenis peta: normal, hibrid, satelit, medan, dan "tidak ada" (untuk tidak menampilkan peta sama sekali).

Peta normal	Peta satelit	Peta hybrid	Peta medan

Setiap jenis peta memberikan berbagai jenis informasi. Misalnya, saat menggunakan peta untuk navigasi di dalam mobil, akan lebih baik jika Anda melihat nama jalan, sehingga Anda dapat menggunakan opsi normal. Saat mendaki, peta medan dapat membantu Anda memutuskan seberapa jauh lagi Anda harus mendaki untuk mencapai puncak.

Dalam tugas ini, Anda akan:

1. Tambahkan panel aplikasi dengan menu opsi yang memungkinkan pengguna mengubah jenis peta.
2. Pindahkan lokasi awal peta ke lokasi rumah Anda sendiri.
3. Menambahkan dukungan untuk penanda, yang menunjukkan satu lokasi di peta dan dapat menyertakan label.

Menambahkan menu untuk jenis peta

Pada langkah ini, Anda akan menambahkan panel aplikasi dengan menu opsi yang memungkinkan pengguna mengubah jenis peta.

1. Untuk membuat file XML menu baru, klik kanan direktori res dan pilih New > Android Resource File.
2. Dalam dialog, beri nama file map_options.
3. Pilih Menu untuk jenis resource.
4. Klik Oke.
5. Di tab Code, ganti kode dalam file baru dengan kode berikut untuk membuat opsi menu peta. Jenis peta "none" tidak disertakan karena "none" tidak akan menampilkan peta sama sekali. Langkah ini menyebabkan error, tetapi Anda akan menyelesaikannya di langkah berikutnya.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto">
   <item
       android:id="@+id/normal_map"
       android:title="@string/normal_map"
       app:showAsAction="never" />
   <item
       android:id="@+id/hybrid_map"
       android:title="@string/hybrid_map"
       app:showAsAction="never" />
   <item
       android:id="@+id/satellite_map"
       android:title="@string/satellite_map"
       app:showAsAction="never" />
   <item
       android:id="@+id/terrain_map"
       android:title="@string/terrain_map"
       app:showAsAction="never" />
</menu>

6. Di strings.xml, tambahkan resource untuk atribut title guna mengatasi error.

<resources>
   ...
   <string name="normal_map">Normal Map</string>
   <string name="hybrid_map">Hybrid Map</string>
   <string name="satellite_map">Satellite Map</string>
   <string name="terrain_map">Terrain Map</string>
   <string name="lat_long_snippet">Lat: %1$.5f, Long: %2$.5f</string>
   <string name="dropped_pin">Dropped Pin</string>
   <string name="poi">poi</string>
</resources>

7. Di MapsActivity, ganti metode onCreateOptionsMenu() dan inflate menu dari file resource map_options.

override fun onCreateOptionsMenu(menu: Menu?): Boolean {
   val inflater = menuInflater
   inflater.inflate(R.menu.map_options, menu)
   return true
}

8. Di MapsActivity.kt, ganti metode onOptionsItemSelected(). Ubah jenis peta menggunakan konstanta jenis peta untuk mencerminkan pilihan pengguna.

override fun onOptionsItemSelected(item: MenuItem) = when (item.itemId) {
   // Change the map type based on the user's selection.
   R.id.normal_map -> {
       map.mapType = GoogleMap.MAP_TYPE_NORMAL
       true
   }
   R.id.hybrid_map -> {
       map.mapType = GoogleMap.MAP_TYPE_HYBRID
       true
   }
   R.id.satellite_map -> {
       map.mapType = GoogleMap.MAP_TYPE_SATELLITE
       true
   }
   R.id.terrain_map -> {
       map.mapType = GoogleMap.MAP_TYPE_TERRAIN
       true
   }
   else -> super.onOptionsItemSelected(item)
}

9. Jalankan aplikasi.
10. Klik untuk mengubah jenis peta. Perhatikan perubahan tampilan peta di antara mode yang berbeda.

Secara default, callback onMapReady() menyertakan kode yang menempatkan penanda di Sydney, Australia, tempat Google Maps dibuat. Callback default juga menganimasikan peta untuk menggeser ke Sydney.

Dalam tugas ini, Anda membuat kamera peta bergerak ke rumah Anda, melakukan zoom ke tingkat yang Anda tentukan, dan menempatkan penanda di sana.

Langkah 1: Zoom ke rumah Anda dan tambahkan penanda

1. Dalam file MapsActivity.kt, temukan metode onMapReady(). Hapus kode di dalamnya yang menempatkan penanda di Sydney dan memindahkan kamera. Sekarang metode Anda akan terlihat seperti ini.

override fun onMapReady(googleMap: GoogleMap) {
   map = googleMap

}

2. Temukan lintang dan bujur rumah Anda dengan mengikuti petunjuk ini.
3. Buat nilai untuk lintang dan nilai untuk bujur, lalu masukkan nilai float-nya.

val latitude = 37.422160
val longitude = -122.084270

4. Buat objek LatLng baru bernama homeLatLng. Di objek homeLatLng, teruskan nilai yang baru saja Anda buat.

val homeLatLng = LatLng(latitude, longitude)

3. Buat val untuk menentukan seberapa besar Anda ingin melakukan zoom pada peta. Gunakan tingkat zoom 15f.

val zoomLevel = 15f

Tingkat zoom mengontrol seberapa besar Anda melakukan zoom pada peta. Daftar berikut memberi Anda gambaran tentang tingkat detail yang ditampilkan setiap tingkat zoom:

• 1: Dunia
• 5: Daratan luas/benua
• 10: Kota
• 15: Jalan
• 20: Bangunan

4. Pindahkan kamera ke homeLatLng dengan memanggil fungsi moveCamera() pada objek map dan teruskan objek CameraUpdate menggunakan CameraUpdateFactory.newLatLngZoom(). Teruskan objek homeLatLng dan zoomLevel.

map.moveCamera(CameraUpdateFactory.newLatLngZoom(homeLatLng, zoomLevel))

6. Tambahkan penanda ke peta di homeLatLng.

map.addMarker(MarkerOptions().position(homeLatLng))

Metode akhir akan terlihat seperti ini:

override fun onMapReady(googleMap: GoogleMap) {
   map = googleMap

   //These coordinates represent the latitude and longitude of the Googleplex.
   val latitude = 37.422160
   val longitude = -122.084270
   val zoomLevel = 15f

   val homeLatLng = LatLng(latitude, longitude)
   map.moveCamera(CameraUpdateFactory.newLatLngZoom(homeLatLng, zoomLevel))
   map.addMarker(MarkerOptions().position(homeLatLng))
}

7. Jalankan aplikasi Anda. Peta akan bergeser ke rumah Anda, melakukan zoom ke tingkat yang diinginkan, dan menempatkan penanda di rumah Anda.

Langkah 2: Izinkan pengguna menambahkan penanda menggunakan klik lama

Pada langkah ini, Anda menambahkan penanda saat pengguna menyentuh dan menahan lokasi di peta.

1. Buat stub metode di MapsActivity bernama setMapLongClick() yang menggunakan GoogleMap sebagai argumen.
2. Lampirkan pemroses setOnMapLongClickListener ke objek peta.

private fun setMapLongClick(map:GoogleMap) {
   map.setOnMapLongClickListener { }
}

3. Di setOnMapLongClickListener(), panggil metode addMarker(). Teruskan objek MarkerOptions baru dengan posisi yang ditetapkan ke LatLng yang diteruskan.

private fun setMapLongClick(map: GoogleMap) {
   map.setOnMapLongClickListener { latLng ->
       map.addMarker(
           MarkerOptions()
               .position(latLng)
       )
   }
}

4. Di akhir metode onMapReady(), panggil setMapLongClick() dengan map.

override fun onMapReady(googleMap: GoogleMap) {
   ...
  
   setMapLongClick(map)
}

5. Jalankan aplikasi Anda.
6. Sentuh lama peta untuk menempatkan penanda di suatu lokasi.
7. Ketuk penanda, yang akan memusatkannya di layar.

Catatan: Saat penanda diketuk, tombol navigasi akan muncul, sehingga pengguna dapat menggunakan aplikasi Google Maps untuk menavigasi ke posisi yang ditandai.

Langkah 3: Tambahkan jendela info untuk penanda

Pada langkah ini, Anda menambahkan InfoWindow yang menampilkan koordinat penanda saat penanda diketuk.

1. Di setMapLongClick()setOnMapLongClickListener(), buat val untuk snippet. Cuplikan adalah teks tambahan yang ditampilkan setelah judul. Cuplikan Anda menampilkan lintang dan bujur penanda.

private fun setMapLongClick(map: GoogleMap) {
   map.setOnMapLongClickListener { latLng ->
       // A snippet is additional text that's displayed after the title.
       val snippet = String.format(
           Locale.getDefault(),
           "Lat: %1$.5f, Long: %2$.5f",
           latLng.latitude,
           latLng.longitude
       )
       map.addMarker(
           MarkerOptions()
               .position(latLng)
       )
   }
}

2. Di addMarker(), tetapkan title penanda ke Dropped Pin menggunakan resource string R.string.dropped_pin.
3. Tetapkan snippet penanda ke snippet.

Fungsi yang sudah selesai akan terlihat seperti ini:

private fun setMapLongClick(map: GoogleMap) {
   map.setOnMapLongClickListener { latLng ->
       // A Snippet is Additional text that's displayed below the title.
       val snippet = String.format(
           Locale.getDefault(),
           "Lat: %1$.5f, Long: %2$.5f",
           latLng.latitude,
           latLng.longitude
       )
       map.addMarker(
           MarkerOptions()
               .position(latLng)
               .title(getString(R.string.dropped_pin))
               .snippet(snippet)
              
       )
   }
}

4. Jalankan aplikasi Anda.
5. Sentuh lama peta untuk memasang penanda lokasi.
6. Ketuk penanda untuk menampilkan jendela info.

Langkah 4: Tambahkan pemroses POI

Secara default, lokasi menarik (POI) muncul di peta bersama ikonnya. POI mencakup taman, sekolah, gedung pemerintahan, dan lainnya. Jika jenis peta disetel ke normal, POI bisnis juga akan muncul di peta. POI bisnis mewakili bisnis, seperti toko, restoran, dan hotel.

Pada langkah ini, Anda akan menambahkan GoogleMap.OnPoiClickListener ke peta. Pemroses klik ini menempatkan penanda di peta segera setelah pengguna mengklik POI. Pelistik klik juga menampilkan jendela info yang berisi nama POI.

1. Buat stub metode di MapsActivity bernama setPoiClick() yang menggunakan GoogleMap sebagai argumen.
2. Dalam metode setPoiClick(), tetapkan OnPoiClickListener pada GoogleMap yang diteruskan.

private fun setPoiClick(map: GoogleMap) {
   map.setOnPoiClickListener { poi ->

   }
}

3. Di setOnPoiClickListener(), buat val poiMarker untuk penanda .
4. Tetapkan ke penanda menggunakan map.addMarker() dengan MarkerOptions yang menetapkan title ke nama POI.

private fun setPoiClick(map: GoogleMap) {
   map.setOnPoiClickListener { poi ->
       val poiMarker = map.addMarker(
           MarkerOptions()
               .position(poi.latLng)
               .title(poi.name)
       )
   }
}

5. Di fungsi setOnPoiClickListener(), panggil showInfoWindow() di poiMarker untuk segera menampilkan jendela info.

poiMarker.showInfoWindow()

Kode akhir untuk fungsi setPoiClick() akan terlihat seperti ini.

private fun setPoiClick(map: GoogleMap) {
   map.setOnPoiClickListener { poi ->
       val poiMarker = map.addMarker(
           MarkerOptions()
               .position(poi.latLng)
               .title(poi.name)
       )
       poiMarker.showInfoWindow()
   }
}

6. Di akhir onMapReady(), panggil setPoiClick() dan teruskan map.

override fun onMapReady(googleMap: GoogleMap) {
   ...

   setPoiClick(map)
}

7. Jalankan aplikasi Anda dan temukan POI, seperti taman atau kedai kopi.
8. Ketuk POI untuk menempatkan penanda di atasnya dan menampilkan nama POI di jendela info.

Anda dapat menyesuaikan Google Maps dengan berbagai cara, sehingga peta Anda memiliki tampilan dan nuansa yang unik.

Anda dapat menyesuaikan objek MapFragment menggunakan atribut XML yang tersedia, seperti yang Anda lakukan saat menyesuaikan fragmen lainnya. Namun, pada langkah ini, Anda akan menyesuaikan tampilan dan nuansa konten MapFragment, menggunakan metode pada objek GoogleMap.

Untuk membuat gaya visual yang disesuaikan untuk peta, Anda membuat file JSON yang menentukan cara fitur dalam peta ditampilkan. Anda tidak perlu membuat file JSON ini secara manual. Google menyediakan Wizard Gaya Visual Maps Platform, yang membuat JSON untuk Anda setelah Anda mengatur gaya visual peta. Dalam tugas ini, Anda akan menata peta dengan tema retro, yang berarti peta menggunakan warna vintage dan Anda menambahkan jalan berwarna.

Catatan: Penataan gaya hanya berlaku untuk peta yang menggunakan jenis peta normal.

Langkah 1: Buat gaya untuk peta Anda

1. Buka https://mapstyle.withgoogle.com/ di browser Anda.
2. Pilih Buat Gaya.
3. Pilih Retro.

4. Klik Opsi Lainnya.

5. Di daftar Feature type, pilih Road > Fill.
6. Ubah warna jalan menjadi warna apa pun yang Anda pilih (seperti merah muda).

7. Klik Selesai.

8. Salin kode JSON dari dialog yang dihasilkan dan, jika Anda mau, simpan di catatan teks biasa untuk digunakan pada langkah berikutnya.

Langkah 2: Tambahkan gaya ke peta Anda

1. Di Android Studio, di direktori res , buat direktori resource dan beri nama raw. Anda menggunakan resource direktori raw seperti kode JSON.
2. Buat file di res/raw bernama map_style.json.
3. Tempelkan kode JSON yang disimpan ke file resource baru.
4. Di MapsActivity, buat variabel class TAG di atas metode onCreate(). Ini digunakan untuk tujuan pencatatan.

private val TAG = MapsActivity::class.java.simpleName

5. Juga di MapsActivity, buat fungsi setMapStyle() yang menerima GoogleMap.
6. Di setMapStyle(), tambahkan blok try{}.
7. Di blok try{}, buat val success untuk keberhasilan penataan gaya. (Anda menambahkan blok catch berikut.)
8. Di blok try{}, tetapkan gaya JSON ke peta, panggil setMapStyle() pada objek GoogleMap. Teruskan objek MapStyleOptions, yang memuat file JSON.
9. Tetapkan hasil ke success. Metode setMapStyle() menampilkan boolean yang menunjukkan status keberhasilan parsing file gaya dan menyetel gaya.

private fun setMapStyle(map: GoogleMap) {
   try {
       // Customize the styling of the base map using a JSON object defined
       // in a raw resource file.
       val success = map.setMapStyle(
           MapStyleOptions.loadRawResourceStyle(
               this,
               R.raw.map_style
           )
       )
   }
}

10. Tambahkan pernyataan if untuk success yang salah. Jika penataan gaya tidak berhasil, cetak log bahwa penguraian telah gagal.

private fun setMapStyle(map: GoogleMap) {
   try {
       ...
       if (!success) {
           Log.e(TAG, "Style parsing failed.")
       }
   }
}

11. Tambahkan blok catch{} untuk menangani situasi file gaya yang tidak ada. Di blok catch, jika file tidak dapat dimuat, maka akan muncul Resources.NotFoundException.

private fun setMapStyle(map: GoogleMap) {
   try {
       ...
   } catch (e: Resources.NotFoundException) {
       Log.e(TAG, "Can't find style. Error: ", e)
   }
}

Metode yang sudah selesai akan terlihat seperti cuplikan kode berikut:

private fun setMapStyle(map: GoogleMap) {
   try {
       // Customize the styling of the base map using a JSON object defined
       // in a raw resource file.
       val success = map.setMapStyle(
           MapStyleOptions.loadRawResourceStyle(
               this,
               R.raw.map_style
           )
       )

       if (!success) {
           Log.e(TAG, "Style parsing failed.")
       }
   } catch (e: Resources.NotFoundException) {
       Log.e(TAG, "Can't find style. Error: ", e)
   }
}

12. Terakhir, panggil metode setMapStyle() dalam metode onMapReady() dengan meneruskan objek GoogleMap Anda.

override fun onMapReady(googleMap: GoogleMap) {
   ...
   setMapStyle(map)
}

13. Jalankan aplikasi Anda.
14. Setel peta ke mode normal dan gaya baru akan terlihat dengan tema retro dan jalan berwarna pilihan Anda.

Catatan: Jika Anda memperkecil tampilan peta terlalu jauh, peta tidak akan menampilkan jalan lagi, sehingga Anda tidak akan melihatnya.

Langkah 3: Beri gaya penanda Anda

Anda dapat mempersonalisasi peta lebih lanjut dengan mengatur gaya penanda peta. Pada langkah ini, Anda akan mengubah penanda merah default menjadi sesuatu yang lebih keren.

1. Dalam metode onMapLongClick(), tambahkan baris kode berikut ke MarkerOptions() konstruktor untuk menggunakan penanda default, tetapi mengubah warnanya menjadi biru.

.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE))

Sekarang onMapLongClickListener() terlihat seperti ini:

map.setOnMapLongClickListener { latLng ->
   // A snippet is additional text that's displayed after the title.
   val snippet = String.format(
       Locale.getDefault(),
       "Lat: %1$.5f, Long: %2$.5f",
       latLng.latitude,
       latLng.longitude
   )
   map.addMarker(
       MarkerOptions()
           .position(latLng)
           .title(getString(R.string.dropped_pin))
           .snippet(snippet)
         .icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE))
   )
}

2. Jalankan aplikasi. Penanda yang muncul setelah Anda mengklik lama kini berwarna biru. Perhatikan bahwa penanda POI masih berwarna merah karena Anda tidak menambahkan gaya ke metode onPoiClick().

Salah satu cara untuk menyesuaikan peta Google adalah dengan menggambar di atasnya. Teknik ini berguna jika Anda ingin menandai jenis lokasi tertentu, seperti tempat memancing yang populer.

• Bentuk: Anda dapat menambahkan polyline, poligon, dan lingkaran ke peta.
• Objek GroundOverlay:Overlay bumi adalah gambar yang disematkan pada peta. Tidak seperti penanda, overlay bumi berorientasi pada permukaan Bumi, bukan pada layar. Memutar, memiringkan, atau melakukan zoom pada peta akan mengubah orientasi gambar. Overlay bumi berguna jika Anda ingin menetapkan satu gambar pada satu area di peta.

Langkah: Menambahkan overlay bumi

Dalam tugas ini, Anda akan menambahkan overlay tanah berbentuk Android ke lokasi rumah Anda.

1. Download image Android ini dan simpan di folder res/drawable Anda. (Pastikan nama filenya adalah android.png.)

2. Di onMapReady(), setelah panggilan untuk memindahkan kamera ke posisi rumah Anda, buat objek GroundOverlayOptions.
3. Tetapkan objek ke variabel bernama androidOverlay.

val androidOverlay = GroundOverlayOptions()

4. Gunakan metode BitmapDescriptorFactory.fromResource() untuk membuat objek BitmapDescriptor dari resource gambar yang didownload.
5. Teruskan objek BitmapDescriptor yang dihasilkan ke metode image() objek GroundOverlayOptions.

val androidOverlay = GroundOverlayOptions()
   .image(BitmapDescriptorFactory.fromResource(R.drawable.android))

6. Buat float overlaySize untuk lebar overlay yang diinginkan dalam meter. Untuk contoh ini, lebar 100f berfungsi dengan baik.

Tetapkan properti position untuk objek GroundOverlayOptions dengan memanggil metode position(), lalu teruskan objek homeLatLng dan overlaySize.

val overlaySize = 100f
val androidOverlay = GroundOverlayOptions()
   .image(BitmapDescriptorFactory.fromResource(R.drawable.android))
   .position(homeLatLng, overlaySize)

7. Panggil addGroundOverlay() pada objek GoogleMap dan teruskan objek GroundOverlayOptions Anda.

map.addGroundOverlay(androidOverlay)

8. Jalankan aplikasi.
9. Ubah nilai zoomLevel menjadi 18f untuk melihat gambar Android sebagai overlay.

Pengguna sering menggunakan Google Maps untuk melihat lokasi mereka saat ini. Untuk menampilkan lokasi perangkat di peta, Anda dapat menggunakan lapisan data lokasi.

Lapisan data lokasi menambahkan Lokasiku ke peta. Saat pengguna mengetuk tombol, peta akan berpusat pada lokasi perangkat. Lokasi ditampilkan sebagai titik biru jika perangkat diam dan sebagai tanda V biru jika perangkat sedang bergerak.

Dalam tugas ini, Anda akan mengaktifkan lapisan data lokasi.

Langkah: Meminta izin akses lokasi

Mengaktifkan pelacakan lokasi di Google Maps memerlukan satu baris kode. Namun, Anda harus memastikan bahwa pengguna telah memberikan izin lokasi (menggunakan model izin runtime).

Pada langkah ini, Anda meminta izin akses lokasi dan mengaktifkan pelacakan lokasi.

1. Di file AndroidManifest.xml, verifikasi bahwa izin FINE_LOCATION sudah ada. Android Studio menyisipkan izin ini saat Anda memilih template Google Maps.

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

2. Di MapsActivity, buat variabel class REQUEST_LOCATION_PERMISSION.

private val REQUEST_LOCATION_PERMISSION = 1

3. Untuk memeriksa apakah izin diberikan, buat metode di MapsActivity yang disebut isPermissionGranted(). Dalam metode ini, periksa apakah pengguna telah memberikan izin.

private fun isPermissionGranted() : Boolean {
  return ContextCompat.checkSelfPermission(
       this,
      Manifest.permission.ACCESS_FINE_LOCATION) == PackageManager.PERMISSION_GRANTED
}

4. Untuk mengaktifkan pelacakan lokasi di aplikasi Anda, buat metode di MapsActivity yang disebut enableMyLocation() yang tidak menggunakan argumen dan tidak menampilkan apa pun. Di dalamnya, periksa izin ACCESS_FINE_LOCATION. Jika izin diberikan, aktifkan lapisan lokasi. Jika tidak, minta izin.

private fun enableMyLocation() {
   if (isPermissionGranted()) {
       map.isMyLocationEnabled = true 
   }
   else {
       ActivityCompat.requestPermissions(
           this,
           arrayOf<String>(Manifest.permission.ACCESS_FINE_LOCATION),
           REQUEST_LOCATION_PERMISSION
       )
   }
}

4. Panggil enableMyLocation() dari callback onMapReady() untuk mengaktifkan lapisan lokasi.

override fun onMapReady(googleMap: GoogleMap) {
   ...
   enableMyLocation()
}

5. Ganti metode onRequestPermissionsResult(). Jika requestCode sama dengan REQUEST_LOCATION_PERMISSION izin diberikan, dan jika array grantResults tidak kosong dengan PackageManager.PERMISSION_GRANTED di slot pertamanya, panggil enableMyLocation().

override fun onRequestPermissionsResult(
   requestCode: Int,
   permissions: Array<String>,
   grantResults: IntArray) {
   if (requestCode == REQUEST_LOCATION_PERMISSION) {
       if (grantResults.contains(PackageManager.PERMISSION_GRANTED)) {
           enableMyLocation()
       }
   }
}

6. Jalankan aplikasi Anda. Akan ada dialog yang meminta akses ke lokasi perangkat. Lanjutkan dan berikan izin.

Catatan: Dialog ini mungkin terlihat berbeda jika Anda tidak menjalankan API level 29.

Peta kini menampilkan lokasi perangkat saat ini menggunakan titik biru. Perhatikan bahwa ada tombol lokasi. Jika Anda menjauhkan peta dari lokasi Anda dan mengklik tombol ini, peta akan dipusatkan kembali ke lokasi perangkat.

Catatan: Saat Anda menjalankan aplikasi di emulator, lokasi mungkin tidak tersedia. Jika Anda belum menggunakan setelan emulator untuk menyetel lokasi, tombol lokasi tidak akan tersedia.

Download kode untuk codelab yang sudah selesai.

$  git clone https://github.com/googlecodelabs/android-kotlin-geo-maps

Atau, Anda dapat mendownload repositori sebagai file zip, mengekstraknya, dan membukanya di Android Studio.

Download zip

Catatan: Anda perlu menambahkan kunci API ke kode solusi atau peta tidak akan muncul.

• Untuk menggunakan Maps API, Anda memerlukan kunci API dari Konsol Google API.
• Di Android Studio, penggunaan template Google Maps Activity akan menghasilkan Activity dengan satu SupportMapFragment dalam tata letak aplikasi. Template ini juga menambahkan ACCESS_FINE_PERMISSION ke manifes aplikasi, menerapkan OnMapReadyCallback di aktivitas Anda, dan mengganti metode onMapReady() yang diperlukan.

Untuk mengubah jenis peta GoogleMap saat runtime, gunakan metode GoogleMap.setMapType(). Google Maps dapat berupa salah satu jenis peta berikut:

• Normal: Peta jalan umum. Menampilkan jalan, beberapa fitur yang dibuat manusia, dan fitur alami penting, seperti sungai. Label jalan dan fitur juga terlihat.
• Hybrid: Data foto satelit dengan tambahan peta jalan. Label jalan dan fitur juga terlihat.
• Satelit: Data foto. Label jalan dan fitur tidak terlihat.
• Medan: Data topografi. Peta ini menyertakan warna, garis kontur, dan label, serta bayangan perspektif. Beberapa jalan dan label juga terlihat.
• Tidak Ada: Tidak ada ubin peta dasar.

Tentang Google Maps:

• Penanda adalah indikator untuk lokasi geografis tertentu.
• Saat diketuk, perilaku default penanda adalah menampilkan jendela info dengan informasi tentang lokasi.
• Secara default, tempat menarik (POI) muncul pada peta dasar bersama ikonnya. POI mencakup taman, sekolah, gedung pemerintahan, dan lainnya.
• Selain itu, POI bisnis (toko, restoran, hotel, dan lainnya) muncul secara default di peta jika jenis peta adalah normal.
• Anda dapat merekam klik pada POI menggunakan OnPoiClickListener.
• Anda dapat mengubah tampilan visual hampir semua elemen Peta Google menggunakan Panduan Gaya Visual. Wizard Gaya Visual membuat file JSON yang Anda teruskan ke Google Maps menggunakan metode setMapStyle().
• Anda dapat menyesuaikan penanda dengan mengubah warna default, atau mengganti ikon penanda default dengan gambar kustom.

Informasi penting lainnya:

• Gunakan overlay bumi untuk menyematkan gambar ke lokasi geografis.
• Gunakan objek GroundOverlayOptions untuk menentukan gambar, ukuran gambar dalam meter, dan posisi gambar. Teruskan objek ini ke metode GoogleMap.addGroundOverlay() untuk menyetel overlay ke peta.
• Jika aplikasi Anda memiliki izin ACCESS_FINE_LOCATION, Anda dapat mengaktifkan pelacakan lokasi dengan menyetel map.isMyLocationEnabled = true.
• Hal ini tidak dibahas dalam codelab ini, tetapi Anda dapat memberikan informasi tambahan tentang lokasi menggunakan Google Street View, yang merupakan foto panorama lokasi tertentu yang dapat dijelajahi.

Dokumentasi developer Android:

• Mulai
• Menambahkan Peta dengan Penanda
• Objek Peta
• Menambahkan Peta Bergaya
• Street View
• Overlay Bumi

Dokumen referensi:

• GoogleMap
• SupportMapFragment
• SupportStreetViewPanoramaFragment

Untuk link ke codelab lain dalam kursus ini, lihat halaman landing codelab Android Lanjutan di Kotlin.