Menampilkan Peta
Tambahkan Google Maps ke aplikasi Anda.
Menampilkan Peta adalah pelajaran Android Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Android Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Android Academy mencakup 4 pelajaran total.
Menempatkan Aplikasi Anda di Peta
Peta mengubah koordinat mentah menjadi sesuatu yang dapat dilihat dan dijelajahi pengguna. Dalam pelajaran ini, Anda akan menambahkan Google Map interaktif ke layar Jetpack Compose menggunakan pustaka resmi maps-compose.
Di akhir pelajaran, Anda akan dapat menambahkan peta nyata yang dapat digeser dan diperbesar ke composable mana pun. Mari siapkan komponen dasarnya.
Pustaka Maps Compose
Google menyediakan pembungkus yang ramah Compose bernama maps-compose. Pustaka ini menyediakan composable GoogleMap, sehingga Anda tidak perlu menyentuh MapView XML lama secara langsung.
Tambahkan dependensi ini ke modul Anda dalam build.gradle.kts. Artefak play-services-maps adalah SDK yang mendasarinya; maps-compose menyesuaikannya untuk Compose.
// build.gradle.kts (module)
dependencies {
implementation("com.google.maps.android:maps-compose:6.1.0")
implementation("com.google.android.gms:play-services-maps:19.0.0")
}Mendapatkan Kunci API
Google Maps memerlukan kunci API. Buat kunci di Google Cloud Console, aktifkan Maps SDK for Android, lalu letakkan kunci tersebut di AndroidManifest.xml dalam tag <application>.
Jangan pernah menulis kunci secara langsung di kode sumber yang Anda publikasikan. Simpan kunci di local.properties dan masukkan melalui placeholder manifes.
<!-- AndroidManifest.xml, inside <application> -->
<meta-data
android:name="com.google.android.geo.API_KEY"
android:value="${MAPS_API_KEY}" />GoogleMap Pertama Anda
Peta paling sederhana adalah satu composable GoogleMap. Berikan Modifier.fillMaxSize() dan Anda langsung mendapatkan peta yang dapat digeser dan diperbesar.
Peta tidak memerlukan anak composable untuk ditampilkan—ubin peta Google dirender secara otomatis setelah kunci API Anda valid.
import com.google.maps.android.compose.GoogleMap
@Composable
fun MapScreen() {
GoogleMap(
modifier = Modifier.fillMaxSize()
)
}Mengontrol Kamera
Kamera menentukan bagian peta yang ditampilkan dan tingkat pembesarannya. Anda menyediakan CameraPositionState yang diingat di antara komposisi ulang.
Buat CameraPosition dari LatLng (lintang, bujur) serta tingkat pembesaran. Pembesaran yang lebih tinggi berarti tampilan lebih dekat.
import com.google.android.gms.maps.model.CameraPosition
import com.google.android.gms.maps.model.LatLng
import com.google.maps.android.compose.rememberCameraPositionState
val sanFrancisco = LatLng(37.7749, -122.4194)
val cameraPositionState = rememberCameraPositionState {
position = CameraPosition.fromLatLngZoom(sanFrancisco, 12f)
}Menghubungkan Kamera ke Peta
Teruskan cameraPositionState tersebut ke GoogleMap agar peta terbuka dengan posisi terpusat sesuai keinginan Anda. Karena statusnya diingat, pergeseran dan pembesaran yang dilakukan pengguna tetap bertahan setelah komposisi ulang.
@Composable
fun CenteredMap() {
val sf = LatLng(37.7749, -122.4194)
val cameraPositionState = rememberCameraPositionState {
position = CameraPosition.fromLatLngZoom(sf, 12f)
}
GoogleMap(
modifier = Modifier.fillMaxSize(),
cameraPositionState = cameraPositionState
)
}Properti Peta
MapProperties mengatur tampilan peta. Opsi umum mencakup jenis peta (normal, satelit, medan, hibrida) dan apakah titik biru lokasi saya diaktifkan.
Ingat objek properti tersebut agar tidak dibuat ulang pada setiap komposisi ulang.
import com.google.maps.android.compose.MapProperties
import com.google.maps.android.compose.MapType
val properties = remember {
MapProperties(
mapType = MapType.NORMAL,
isMyLocationEnabled = false
)
}Pengaturan UI Peta
MapUiSettings mengaktifkan atau menonaktifkan kontrol di layar: tombol pembesaran, kompas, tombol lokasi saya, dan gestur.
Nonaktifkan kontrol yang tidak diperlukan agar tampilannya lebih rapi — misalnya sembunyikan tombol pembesaran, tetapi tetap aktifkan gestur mencubit untuk memperbesar.
import com.google.maps.android.compose.MapUiSettings
val uiSettings = remember {
MapUiSettings(
zoomControlsEnabled = false,
compassEnabled = true,
scrollGesturesEnabled = true,
zoomGesturesEnabled = true
)
}Menggabungkan Semuanya
Gabungkan kamera, properti, dan pengaturan UI menjadi satu peta yang telah dikonfigurasi. Inilah bentuk umum layar peta pada aplikasi produksi.
@Composable
fun ConfiguredMap() {
val sf = LatLng(37.7749, -122.4194)
val cameraPositionState = rememberCameraPositionState {
position = CameraPosition.fromLatLngZoom(sf, 12f)
}
val properties = remember { MapProperties(mapType = MapType.NORMAL) }
val uiSettings = remember { MapUiSettings(zoomControlsEnabled = false) }
GoogleMap(
modifier = Modifier.fillMaxSize(),
cameraPositionState = cameraPositionState,
properties = properties,
uiSettings = uiSettings
)
}Merespons Ketukan pada Peta
GoogleMap menyediakan callback seperti onMapClick. Gunakan callback tersebut untuk merespons saat pengguna mengetuk peta — misalnya untuk mengambil LatLng yang dipilih.
Simpan titik yang diketuk dalam status agar UI Anda dapat meresponsnya.
@Composable
fun ClickableMap() {
var picked by remember { mutableStateOf<LatLng?>(null) }
GoogleMap(
modifier = Modifier.fillMaxSize(),
onMapClick = { latLng -> picked = latLng }
)
picked?.let { p ->
Text("Picked: ${p.latitude}, ${p.longitude}")
}
}Siklus Hidup Ditangani untuk Anda
Dengan MapView XML klasik, Anda harus meneruskan setiap peristiwa siklus hidup secara manual. Pustaka maps-compose menghubungkan peta dengan siklus hidup komposisi secara otomatis.
Artinya, tidak perlu lagi mengatur onResume/onPause/onDestroy secara manual — satu alasan lagi untuk memilih API Compose pada layar baru.
Pemeriksaan Singkat
Objek status komposabel apa yang harus Anda ingat dan teruskan ke GoogleMap untuk mengatur posisi pusat dan tingkat pembesaran peta?
Rangkuman
Sekarang Anda dapat menempatkan Google Map sungguhan di Compose:
- Tambahkan
maps-compose+play-services-mapsdan kunci API pada manifes. - Tampilkan peta dengan komposabel
GoogleMap. - Atur posisi pusat dan pembesarannya dengan
rememberCameraPositionStatedanCameraPosition. - Sesuaikan peta dengan
MapPropertiesdanMapUiSettings, lalu respons ketukan denganonMapClick.
Berikutnya: mendapatkan lokasi sebenarnya perangkat untuk memusatkan peta pada pengguna.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Menampilkan Peta” gratis?
Ya — teks lengkap “Menampilkan Peta” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Android Academy, upgrade ke CoddyKit PRO. Kursus Android Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Menampilkan Peta”?
Tambahkan Google Maps ke aplikasi Anda. Kamu berlatih Android Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Android Academy?
Tidak diperlukan pengalaman sebelumnya. Android Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Menampilkan Peta” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Android Academy ini?
Ya. Setiap pelajaran Android Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.