Langsung ke konten
Capgo - Build, rilis, dan update aplikasi Capacitor Capgo

Setup Android

GitHub
Rekaman emulator Android dengan Google Maps: pin lokasi toko, zona pengiriman, rute, 500 marker cluster, kamera 3D miring, dan tipe peta satelit

Android menggunakan Google Maps SDK. Tambahkan key API Anda sebagai metadata manifest di android/app/src/main/AndroidManifest.xml di dalam <application>:

<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="${GOOGLE_MAPS_API_KEY}" />

Di dalam android { defaultConfig { ... } } di android/app/build.gradle, petakan placeholder ke environment variable atau local secret:

android {
    defaultConfig {
        manifestPlaceholders = [
            GOOGLE_MAPS_API_KEY: System.getenv("GOOGLE_MAPS_API_KEY") ?: "REPLACE_WITH_YOUR_GOOGLE_MAPS_API_KEY"
        ]
    }
}

Ekspor GOOGLE_MAPS_API_KEY sebelum build, atau Gradle akan menyuntikkan fallback string dan Maps SDK akan gagal saat runtime.

Aktifkan Maps SDK untuk Android untuk key di Google Cloud Console. Teruskan key yang sama ke NativeMap.create({ apiKey }) untuk konsistensi dengan build web.

Map di balik WebView

Bagian berjudul “Peta di belakang WebView”

Selama create, plugin menempelkan MapView di bawah WebView Capacitor, memanggil bringToFront() pada WebView, dan mengatur webView.setBackgroundColor(Color.TRANSPARENT) agar UI HTML Anda bisa dirender di atas peta.

Untuk peta tertanam, teruskan elemen container ke NativeMap.create({ element }). Plugin mengukur elemen tersebut dan menjaga frame peta native tetap sinkron saat resize dan scroll.

Untuk mode background, berikan toBack: true dan atur config.x, config.y, config.width, dan config.height (default viewport berlaku jika tidak diisi). Panggil updateLayout saat ukuran atau orientasi jendela berubah agar MapView tetap selaras dengan WebView.