Set properties on a map in Android using Jetpack Compose

In this article, we will take a look at the implementation of properties & different types of Google Maps in Android using Jetpack Compose.

When we use the default application of Google Maps we will get to see different types of Maps present inside this application. We will get to see satellite maps, terrain maps, and many more. We have seen adding Google Maps in the Android application. 

@Composable
fun ComposeMapPropertiesDemo() {
    var properties by remember {
        mutableStateOf(MapProperties(mapType = MapType.NORMAL))
        // mutableStateOf(MapProperties(mapType = MapType.TERRAIN))
        // mutableStateOf(MapProperties(mapType = MapType.HYBRID))
        // mutableStateOf(MapProperties(mapType = MapType.SATELLITE))
    }

    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        properties = properties,
    )
}

..

Set properties on a map

• MapProperties : Data type for properties that can be modified on a map.
• MapUISettings : Data type for UI-related settings on a map.

You can set properties on the map by providing a MapProperties object, or a MapUiSettings object for UI-related properties. You can modify these objects to trigger recomposition of the map.

In the example below, use a Switch, a Material Design component, to toggle zoom controls on the map.

var uiSettings by remember { mutableStateOf(MapUiSettings()) }
var properties by remember {
  mutableStateOf(MapProperties(mapType = MapType.SATELLITE))
}

Box(Modifier.fillMaxSize()) {
  GoogleMap(
    modifier = Modifier.matchParentSize(),
    properties = properties,
    uiSettings = uiSettings
  )
  Switch(
    checked = uiSettings.zoomControlsEnabled,
    onCheckedChange = {
      uiSettings = uiSettings.copy(zoomControlsEnabled = it)
    }
  )
}

In this example

Controlling a map's camera (Zoom in) when user on click button on map

@Composable
fun ComposeMapControllingCamera() {
    val singapore = LatLng(1.35, 103.87)
    val cameraPositionState: CameraPositionState = rememberCameraPositionState {
        position = CameraPosition.fromLatLngZoom(singapore, 11f)
    }
    Box(Modifier.fillMaxSize()) {
        GoogleMap(cameraPositionState = cameraPositionState){
        }
        Button(onClick = {
            // Move the camera to a new zoom level
            cameraPositionState.move(CameraUpdateFactory.zoomIn())
        }) {
            Text(text = "Zoom In")
        }
    }
}

..

GET source code on Github:

..