Android Academy · Lesson

Showing a Map

Add Google Maps to your app.

Showing a Map is a free Android Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Android Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Putting Your App on the Map

Maps turn raw coordinates into something users can see and explore. In this lesson you'll add an interactive Google Map to a Jetpack Compose screen using the official maps-compose library.

By the end you'll be able to drop a real, pannable, zoomable map into any composable. Let's get the building blocks in place.

The Maps Compose Library

Google ships a Compose-friendly wrapper called maps-compose. It exposes a GoogleMap composable so you never touch the old XML MapView directly.

Add these dependencies to your module's build.gradle.kts. The play-services-maps artifact is the underlying SDK; maps-compose adapts it for 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")
}

Getting an API Key

Google Maps requires an API key. Create one in the Google Cloud Console, enable the Maps SDK for Android, then place the key in your AndroidManifest.xml inside the <application> tag.

Never hard-code the key in source you commit publicly. Store it in local.properties and inject it via the manifest placeholder.

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

Your First GoogleMap

The simplest map is a single GoogleMap composable. Give it a Modifier.fillMaxSize() and you instantly get a pannable, zoomable map.

It needs no children to display — Google's tiles render automatically once your API key is valid.

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

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

Controlling the Camera

The camera decides where the map looks and how far it's zoomed. You provide a CameraPositionState remembered across recompositions.

Build a CameraPosition from a LatLng (latitude, longitude) plus a zoom level. Higher zoom = closer in.

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

Wiring the Camera into the Map

Pass that cameraPositionState to GoogleMap so the map opens centered where you want. Because the state is remembered, the user's pans and zooms survive recomposition.

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

Map Properties

MapProperties configures what the map shows. Common options include the map type (normal, satellite, terrain, hybrid) and whether the blue my-location dot is enabled.

Remember the properties object so it isn't rebuilt on every recomposition.

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

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

Map UI Settings

MapUiSettings toggles the on-screen controls: zoom buttons, the compass, the my-location button and gestures.

Disable controls you don't need for a cleaner look — for example hide zoom buttons but keep pinch-to-zoom gestures enabled.

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

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

Putting It All Together

Combine the camera, properties and UI settings into one configured map. This is the typical shape of a production map screen.

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

Reacting to Map Clicks

GoogleMap exposes callbacks like onMapClick. Use them to respond when the user taps the map — for instance to capture a chosen LatLng.

Hold the tapped point in state so your UI can react to it.

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

Lifecycle is Handled for You

With the classic XML MapView you had to forward every lifecycle event by hand. The maps-compose library wires the map to the composition lifecycle automatically.

That means no manual onResume/onPause/onDestroy plumbing — one more reason to prefer the Compose API for new screens.

Quick Check

Which composable state object do you remember and pass to GoogleMap to control where the map is centered and zoomed?

Recap

You can now place a real Google Map in Compose:

Add maps-compose + play-services-maps and a manifest API key.
Render a map with the GoogleMap composable.
Center and zoom it with rememberCameraPositionState and CameraPosition.
Customize it with MapProperties and MapUiSettings, and react to taps with onMapClick.

Next up: getting the device's actual location to center the map on the user.

Frequently asked questions

Is the “Showing a Map” lesson free?

Yes — the full text of “Showing a Map” is free to read here on the web, and the Android Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Android Academy course, upgrade to CoddyKit PRO.

What will I learn in “Showing a Map”?

Add Google Maps to your app. You practise Android Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Android Academy?

No prior experience is required. Android Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Showing a Map” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Android Academy lesson?

Yes. Every Android Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Android Academy