Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a way to change the position of the Google Maps API buttons in Compose?

I would like to move the map buttons, mainly the Compass button (which appears at the top left) and the My Location button (which appears at the top right) so that I can put them down or in any position other than all the way to the top.
Currently they are complicated to use as they are below the Status Bar and my camera position, but I like that the map extends all the way to the top and I would not like to generally move the map down.
Screenshot with my Map
This is my code:

@Composable
fun MapsScreen() {
    // Obtener el contexto actual de la aplicación
    val context = LocalContext.current

    // Verificar si el dispositivo está en tema oscuro o claro
    val isDarkTheme =
        when (context.resources.configuration.uiMode and Configuration.UI_MODE_NIGHT_MASK) {
            Configuration.UI_MODE_NIGHT_YES -> true
            else -> false
        }

    // Elegir el estilo del mapa según el tema del dispositivo
    val mapStyleTheme = if (isDarkTheme) {
        R.raw.mapstyle_night
    } else {
        R.raw.mapstyle_day
    }

    // Obtener el cliente FusedLocationProviderClient para obtener la última ubicación conocida
    val fusedLocationClient: FusedLocationProviderClient =
        LocationServices.getFusedLocationProviderClient(context)
    var lastKnownLocation by remember {
        mutableStateOf(
            LatLng(
                0.0,
                0.0
            )
        )
    }
    var zoom by remember { mutableFloatStateOf(10f) }

    // Comprobación de permisos requerida (obligatoria) por de Android
    if (ActivityCompat.checkSelfPermission(
            context,
            Manifest.permission.ACCESS_FINE_LOCATION
        ) != PackageManager.PERMISSION_GRANTED && ActivityCompat.checkSelfPermission(
            context,
            Manifest.permission.ACCESS_COARSE_LOCATION
        ) != PackageManager.PERMISSION_GRANTED
    ) {
        return
    }

    // Mover la cámara a la última ubicación conocida
    val cameraPositionState = rememberCameraPositionState {
        fusedLocationClient.lastLocation
            .addOnSuccessListener { location: Location? ->
                // Verifica si la ubicación no es nula
                location?.let {
                    // Actualiza la latitud y longitud
                    val latitud = location.latitude
                    val longitud = location.longitude
                    // Actualiza la última ubicación conocida
                    lastKnownLocation = LatLng(latitud, longitud)
                    println("Location: $lastKnownLocation")
                    zoom = 15f
                    // Actualiza la posición de la cámara
                    position = CameraPosition.fromLatLngZoom(lastKnownLocation, zoom)
                }
            }
    }
    // Configuración de la UI del mapa
    val uiSettings by remember {
        mutableStateOf(
            MapUiSettings(
                myLocationButtonEnabled = true,
                mapToolbarEnabled = true,
            )
        )
    }
    // Configuración de las propiedades del mapa
    val properties by remember {
        mutableStateOf(
            MapProperties(
                mapType = MapType.NORMAL,
                isMyLocationEnabled = true,
                mapStyleOptions = MapStyleOptions.loadRawResourceStyle(
                    context,
                    mapStyleTheme
                ) // Estilo del mapa personalizado basado en el tema del dispositivo (mapStyleTheme)
            )
        )
    }
    // Composable para mostrar el mapa
    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        cameraPositionState = cameraPositionState,
        properties = properties,
        uiSettings = uiSettings
    ) {
        Marker(
            state = MarkerState(position = lastKnownLocation),
            title = "lastKnownLocation",
            snippet = "Marker in lastKnownLocation"
        )
    }
}

At the moment I have not found any documentation to be able to change the position of the buttons in Android.

like image 366
Ulises Cortés Avatar asked Nov 15 '25 11:11

Ulises Cortés


1 Answers

Use the contentPadding argument of GoogleMap(). This will move your Map buttons.

GoogleMap(contentPadding = PaddingValues(top = 64.dp))
like image 151
Roney Thomas Avatar answered Nov 17 '25 10:11

Roney Thomas



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!