Google Map

Initial Position

Let's make the app more friendly by automatically moving to that marker position.

First, we define a CameraPosition to indicate where we want to jump to on the map. Think of this as a literal camera, pointing to a LatLng from a specific bearing and tilt, zoomed in/out to a certain factor.

We define a CameraPositionState similar to our MarkerState to hold the data for the map camera. It's position is initialized to our defaultCameraPosition, but as the user interacts with the map (panning, zooming, rotating, etc) this state will be updated.

Where should we define these state? Only as high in the call hierarchy as needed. Pretend that we have a ViewModel that needs to know when the camera moves; defining the cameraPositionState in onCreate as we're doing here gives us access to that state. If instead we defined it inside GoogleMapView, we would only have access to that state inside GoogleMapView (unless we passed an onCameraChange function that could be used to send out changed camera values).

Pulling state up out of functions like this is called "State Hoisting".

We use that state inside the GoogleMap call.

Now when we run the application, we see the map centered on Google HQ.

Code Changes

CHANGED: /app/src/main/java/com/androidbyexample/googlemap/MainActivity.kt

package com.androidbyexample.googlemap

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import com.androidbyexample.googlemap.ui.theme.GoogleMapTheme
import com.google.android.gms.maps.model.CameraPositionimport com.google.android.gms.maps.model.LatLng
import com.google.maps.android.compose.CameraPositionStateimport com.google.maps.android.compose.GoogleMap
import com.google.maps.android.compose.MarkerInfoWindowContent
import com.google.maps.android.compose.rememberCameraPositionStateimport com.google.maps.android.compose.rememberMarkerState

private val googleHQ = LatLng(37.42423291057923, -122.08811454627153)
private val defaultCameraPosition = CameraPosition.fromLatLngZoom(googleHQ, 11f)
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            GoogleMapTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    val cameraPositionState = rememberCameraPositionState {                        position = defaultCameraPosition                    }
                    GoogleMapDisplay(
                        place = googleHQ,
                        placeDescription = "Google HQ",
                        cameraPositionState = cameraPositionState,                        modifier = Modifier.fillMaxSize(),
                    )
                }
            }
        }
    }
}

@Composable
fun GoogleMapDisplay(
    place: LatLng,
    placeDescription: String,
    cameraPositionState: CameraPositionState,    modifier: Modifier,
) {
    val placeState =
        rememberMarkerState(key = place.toString(), position = place)

    GoogleMap(
        cameraPositionState = cameraPositionState,
        modifier = modifier,
    ) {
        MarkerInfoWindowContent(
            state = placeState,
            title = placeDescription,
            onClick = {
                placeState.showInfoWindow()
                true
            }
        )
    }
}