Android-Setup

Kopiere einen Setup-Prompt mit den Installationsschritten und dem vollständigen Markdown-Guide für dieses Plugin.

Android-Emulator-Aufnahme mit Google Maps: Store-Locator-Pins, Lieferzonen, eine Route, 500 Cluster-Marker, eine geneigte 3D-Kamera und Satellitenkarten

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

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

Innerhalb android { defaultConfig { ... } } in android/app/build.gradle, mappe den Platzhalter auf eine Umgebungsvariable oder ein lokales Secret:

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

Exportiere GOOGLE_MAPS_API_KEY vor dem Build, sonst injiziert Gradle den Fallback-String und der Maps SDK schlägt zur Laufzeit fehl.

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

Map hinter der WebView

Während createbindet das Plugin ein MapView unter der Capacitor WebView, ruft bringToFront() auf der WebView auf und setzt webView.setBackgroundColor(Color.TRANSPARENT) damit dein HTML-UI über der Map gerendert werden kann.

Für eingebettete Maps übergib ein Container-Element an NativeMap.create({ element }). Das Plugin misst dieses Element und hält den nativen Map-Frame bei Resize und Scroll synchron.

Für Background-Modus, übergib toBack: true und setze config.x, config.y, config.width, und config.height (viewport defaults apply when omitted). Call updateLayout wenn sich die Fenstergröße oder Ausrichtung ändert, damit MapView mit der WebView synchron bleibt.