Creación de Marcadores en Google Maps con Jetpack Compose

Incorporar mapas interactivos en aplicaciones Android es sencillo con Jetpack Compose. Un aspecto esencial para cualquier app que use ubicación es crear y gestionar marcadores visuales directamente sobre el mapa, indicando posiciones específicas para guiar a los usuarios.

¿Cómo crear un Composable para mapas con Jetpack Compose?

Para iniciar, organizaremos nuestros elementos creando carpetas que faciliten la estructuración del código:

• Primero, abre tu proyecto TrackIt.
• Crea una carpeta o paquete llamado Presentation.maps.
• Dentro de esta carpeta, añade un archivo llamado MapsSection para crear tu primer Composable.

En esta función MapsSection, utiliza el siguiente código inicial básico:

@Composable
fun MapsSection(modifier: Modifier) {
    GoogleMap(modifier = modifier)
}

Si aún no tienes claro cómo funcionan los Composable, puedes consultar previamente el curso sobre Jetpack Compose disponible en Platzi.

¿Cómo configurar las interacciones del mapa en Android?

Jetpack Compose permite ajustar la experiencia del usuario configurando diversas funciones del mapa:

• Utiliza las opciones UI Settings, por ejemplo:

GoogleMap(
    modifier = modifier,
    uiSettings = MapUiSettings(zoomGesturesEnabled = false)
)

Con esta configuración, desactivas la opción de hacer zoom en el mapa, permitiendo únicamente desplazamientos.

• También tiene eventos que notifican acciones, por ejemplo, cuando el mapa ha terminado de cargar:

GoogleMap(
    modifier = modifier,
    onMapLoaded = {
        val activity = LocalActivity.current
        Toast.makeText(activity, "Map Loaded", Toast.LENGTH_SHORT).show()
    }
)

Al ejecutar este código, aparecerá un pequeño mensaje (Toast) informando que el mapa ya está cargado.

¿Cómo agregar marcadores personalizados al mapa?

Para mostrar marcadores específicos en regiones determinadas del mapa, debemos seguir estos pasos:

1. Crear un estado para ubicar el marcador:

val markerState = rememberMarkerState()
LaunchedEffect(Unit) {
    markerState.position = LatLng(4.65, -74.0)
}

1. Insertar el marcador de forma visual:

GoogleMap(modifier = modifier) {
    Marker(
        state = markerState
    ) {
        Box(
            modifier = Modifier
                .size(35.dp)
                .background(MaterialTheme.colorScheme.primary, shape = CircleShape),
            contentAlignment = Alignment.Center
        ) {
            Icon(
                imageVector = Icons.Default.Camera,
                contentDescription = null,
                tint = MaterialTheme.colorScheme.onPrimary,
                modifier = Modifier.size(20.dp)
            )
        }
    }
}

Este marcador personalizado se visualizará como un círculo con un ícono de cámara en el centro, útil para aplicaciones enfocadas en interacción de cámara con la ubicación.

De esta forma, ya tienes tu primer marcador interactivo ubicado claramente en el mapa, preparando el camino para añadir rutas, seguimiento en tiempo real y otras interesantes funcionalidades.

Comparte en comentarios cómo te fue implementando estas características en tu aplicación Jetpack Compose.