0Pricing
Android Academy · Lektion

Eine Karte anzeigen

Google Maps zu Ihrer App hinzufügen

Eine Karte anzeigen ist eine kostenlose Android Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Android Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.

Ihre App auf die Karte bringen

Karten verwandeln rohe Koordinaten in etwas, das Benutzer sehen und erkunden können. In dieser Lektion fügen Sie mithilfe der offiziellen Bibliothek maps-compose eine interaktive Google Map in einen Jetpack-Compose-Bildschirm ein.

Am Ende können Sie eine echte, verschiebbare und zoombare Karte in jedes Composable einfügen. Legen wir zunächst die erforderlichen Bausteine bereit.

Die Maps-Compose-Bibliothek

Google stellt einen Compose-freundlichen Wrapper namens maps-compose bereit. Er bietet ein GoogleMap-Composable, sodass Sie die alte XML-MapView nicht direkt verwenden müssen.

Fügen Sie diese Abhängigkeiten dem Modul-build.gradle.kts hinzu. Das Artefakt play-services-maps ist das zugrunde liegende SDK; maps-compose passt es an Compose an.

// 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")
}

Einen API-Schlüssel erhalten

Google Maps benötigt einen API-Schlüssel. Erstellen Sie ihn in der Google Cloud Console, aktivieren Sie das Maps SDK for Android und tragen Sie den Schlüssel anschließend in Ihrer AndroidManifest.xml innerhalb des Tags <application> ein.

Schreiben Sie den Schlüssel niemals fest in Quellcode, den Sie öffentlich veröffentlichen. Speichern Sie ihn in local.properties und fügen Sie ihn über den Manifest-Platzhalter ein.

<!-- AndroidManifest.xml, inside <application> -->
<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value="${MAPS_API_KEY}" />

Ihre erste GoogleMap

Die einfachste Karte ist ein einzelnes GoogleMap-Composable. Geben Sie ihm einen Modifier.fillMaxSize(), und Sie erhalten sofort eine verschiebbare und zoombare Karte.

Zur Anzeige sind keine untergeordneten Elemente erforderlich – die Kartenkacheln von Google werden automatisch gerendert, sobald Ihr API-Schlüssel gültig ist.

import com.google.maps.android.compose.GoogleMap

@Composable
fun MapScreen() {
    GoogleMap(
        modifier = Modifier.fillMaxSize()
    )
}

Die Kamera steuern

Die Kamera bestimmt, welchen Kartenausschnitt die Karte zeigt und wie stark sie vergrößert ist. Sie stellen einen über Rekombinationen hinweg gemerkten CameraPositionState bereit.

Erstellen Sie aus einem LatLng (Breiten- und Längengrad) sowie einer Zoomstufe eine CameraPosition. Eine höhere Zoomstufe bedeutet eine nähere Ansicht.

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)
}

Die Kamera in die Karte einbinden

Übergeben Sie cameraPositionState an GoogleMap, damit die Karte beim Öffnen an der gewünschten Stelle zentriert ist. Da der Zustand gespeichert bleibt, überstehen die Schwenk- und Zoombewegungen des Benutzers die erneute Komposition.

@Composable
fun CenteredMap() {
    val sf = LatLng(37.7749, -122.4194)
    val cameraPositionState = rememberCameraPositionState {
        position = CameraPosition.fromLatLngZoom(sf, 12f)
    }
    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        cameraPositionState = cameraPositionState
    )
}

Karteneigenschaften

MapProperties legt fest, was die Karte anzeigt. Zu den häufig verwendeten Optionen gehören der Kartentyp (normal, Satellit, Gelände, hybrid) und die Frage, ob der blaue Punkt für „Mein Standort“ aktiviert ist.

Merken Sie sich das Eigenschaftenobjekt, damit es nicht bei jeder erneuten Komposition neu erstellt wird.

import com.google.maps.android.compose.MapProperties
import com.google.maps.android.compose.MapType

val properties = remember {
    MapProperties(
        mapType = MapType.NORMAL,
        isMyLocationEnabled = false
    )
}

Einstellungen der Kartenoberfläche

MapUiSettings schaltet die Steuerelemente auf dem Bildschirm ein oder aus: Zoomschaltflächen, Kompass, die Schaltfläche „Mein Standort“ und Gesten.

Deaktivieren Sie nicht benötigte Steuerelemente für ein aufgeräumteres Erscheinungsbild – blenden Sie beispielsweise die Zoomschaltflächen aus, lassen Sie aber die Aufziehgeste zum Zoomen aktiviert.

import com.google.maps.android.compose.MapUiSettings

val uiSettings = remember {
    MapUiSettings(
        zoomControlsEnabled = false,
        compassEnabled = true,
        scrollGesturesEnabled = true,
        zoomGesturesEnabled = true
    )
}

Alles zusammenführen

Führen Sie Kamera, Eigenschaften und Einstellungen der Kartenoberfläche zu einer konfigurierten Karte zusammen. Dies entspricht dem typischen Aufbau eines produktiven Kartenbildschirms.

@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
    )
}

Auf Klicks auf die Karte reagieren

GoogleMap stellt Callbacks wie onMapClick bereit. Verwenden Sie diese, um auf Tippen des Benutzers auf die Karte zu reagieren – beispielsweise, um eine ausgewählte LatLng-Position zu erfassen.

Halten Sie den angetippten Punkt im Zustand, damit Ihre Benutzeroberfläche darauf reagieren kann.

@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}")
    }
}

Der Lebenszyklus wird für Sie verwaltet

Bei der klassischen XML-MapView mussten Sie jedes Lebenszyklusereignis manuell weiterleiten. Die Bibliothek maps-compose verbindet die Karte automatisch mit dem Lebenszyklus der Komposition.

Das bedeutet, dass keine manuelle Verarbeitung von onResume/onPause/onDestroy erforderlich ist – ein weiterer Grund, die Compose-API für neue Bildschirme zu bevorzugen.

Kurze Überprüfung

Welches Composable-Zustandsobjekt speichern Sie und übergeben es an GoogleMap, um festzulegen, wo die Karte zentriert und auf welche Zoomstufe sie eingestellt wird?

Zusammenfassung

Sie können jetzt eine echte Google-Karte in Compose einfügen:

  • Fügen Sie maps-compose und play-services-maps sowie einen API-Schlüssel im Manifest hinzu.
  • Rendern Sie eine Karte mit dem Composable GoogleMap.
  • Zentrieren und zoomen Sie sie mit rememberCameraPositionState und CameraPosition.
  • Passen Sie sie mit MapProperties und MapUiSettings an und reagieren Sie mit onMapClick auf Tippen.

Als Nächstes: den tatsächlichen Standort des Geräts ermitteln, um die Karte auf den Benutzer zu zentrieren.

Häufig gestellte Fragen

Ist die Lektion „Eine Karte anzeigen“ kostenlos?

Ja — der vollständige Text von „Eine Karte anzeigen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Android Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Android Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Eine Karte anzeigen“?

Google Maps zu Ihrer App hinzufügen Du übst Android Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um Android Academy zu starten?

Keine Vorkenntnisse erforderlich. Android Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 1 von 4.

Wie lange dauert die Lektion „Eine Karte anzeigen“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser Android Academy-Lektion Code schreiben und ausführen?

Ja. Jede Android Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Eine Karte anzeigen
  2. Den Standort des Benutzers abrufen
  3. Marker und Kamera
  4. Standortberechtigungen richtig umsetzen
← Zurück zu Android Academy