GoogleMapViewHolder

Overview

To access Google Maps API-specific features, use the GoogleMapViewHolder. The definition of GoogleMapViewHolder is as follows:

typealias GoogleMapViewHolder = MapViewHolderInterface<MapView, GoogleMap>

class GoogleMapViewHolder(
    override val mapView: MapView,
    override val map: GoogleMap,
) : MapViewHolderInterface<MapView, GoogleMap> {
    fun toScreenOffset(position: GeoPointInterface): Offset?
    suspend fun fromScreenOffset(offset: Offset): GeoPoint?
}

Properties

• mapView: MapView: MapView generated inside the GoogleMapView component
• map: GoogleMap: GoogleMap class for manipulating the MapView

Methods

• toScreenOffset(position: GeoPointInterface): Offset?: Returns the position on the map indicated by GeoPointInterface as a Dp value with the top-left of the MapView as (0,0)
• fromScreenOffset(offset: Offset): GeoPoint?: Returns the GeoPointInterface position on the map for the position specified by Dp value with the top-left of the MapView as (0,0)

Getting GoogleMapViewHolder

GoogleMapViewHolder can be obtained through getMapViewHolder() after the map is initialized.

// Google Maps
val googleMapState = rememberGoogleMapViewState()
val googleHolder: GoogleMapViewHolder? = googleMapState.getMapViewHolder()

Sample

@Composable
fun MapViewHolderGoogleMapsExample(modifier: Modifier = Modifier) {
    val context = LocalContext.current

    // Map camera position
    val mapViewState = rememberGoogleMapViewState(
        cameraPosition = MapCameraPosition(
            position = GeoPoint.fromLatLong(28.53456, 77.192845),
            zoom = 12.0
        ),
    )

    // Using mutableStateOf, recompose when mapStyle changes
    var mapStyle by remember { mutableStateOf<MapStyleOptions?>(null) }

    // Get ViewHolder
    val googleMapViewHolder = mapViewState.getMapViewHolder()
    LaunchedEffect(googleMapViewHolder, mapStyle) {
        if (googleMapViewHolder == null) return@LaunchedEffect
        googleMapViewHolder.map.setMapStyle(mapStyle)
    }

    Column(modifier = modifier) {
        Row(
            modifier = Modifier.fillMaxWidth(),
        ) {
            Spacer(modifier = Modifier.size(20.dp))

            // Normal Google Maps
            Button(onClick = {
                mapStyle = null
            }) {
                Text(
                    text = "Normal"
                )
            }
            Spacer(modifier = Modifier.size(20.dp))

            // Simplified map design
            Button(onClick = {
                mapStyle = MapStyleOptions.loadRawResourceStyle(context, R.raw.style_map)
            }) {
                Text(
                    text = "Simplified"
                )
            }
        }

        GoogleMapView(
            state = mapViewState,
            modifier = Modifier.fillMaxSize(),
        ) {}
    }
}