Android-Setup

Android verwendet Google Maps SDK. Füge deinen API-Key als Manifest-Metadaten in android/app/src/main/AndroidManifest.xml innerhalb <application>:

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

In android { defaultConfig { ... } } in einem android/app/build.gradle, weise den Platzhalter einer Umgebungsvariable oder einem lokalen Secret zu:

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

Exportieren GOOGLE_MAPS_API_KEY vor dem Build, da sonst Gradle den Fallback-String injiziert und der Maps SDK zur Laufzeit fehlschlägt.

Aktivieren Maps SDK für Android für den Key in der Google Cloud Console. Übergeben Sie denselben Key an NativeMap.create({ apiKey }) für Konsistenz mit Web-Builds.

Map hinter der WebView

Während create, hängt das Plugin MapView unter die Capacitor WebView ein, ruft bringToFront() auf der WebView auf und setzt webView.setBackgroundColor(Color.TRANSPARENT) damit Ihre HTML-UI über der Karte gerendert werden kann.

Für eingebettete Karten übergeben Sie ein Container-Element an NativeMap.create({ element }). Das Plugin misst dieses Element und hält den nativen Kartenrahmen bei Resize und Scroll synchron.

Für Hintergrundmodus, übergeben toBack: true und setze config.x, config.y, config.width, und config.height (Standardwerte des Viewports gelten, wenn weggelassen). Rufe updateLayout auf, wenn sich die Fenstergröße oder -ausrichtung ändert, damit die MapView mit dem WebView synchron bleibt.