Galería de fotos en marcadores del mapa

Curso de Android: Integración de APIs nativas

Contenido del curso

Introducción a la Integración Nativa en Android

Google Maps SDK

Servicios de Localización

Integración Maps con Localización

Manejo de permisos

Integración cámara

Servicios en Android

Transmisiones en Android (Broadcast)

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0011:55

Galería de fotos en marcadores del mapa

Curso de Android: Integración de APIs nativas

Clase 29 de 33

Clase 29 / 33

Recursos

Mostrar fotos georreferenciadas dentro de un mapa requiere conectar tres piezas: el estado del tracking, los marcadores personalizados y un diálogo con galería. Aquí verás cómo unir esos componentes en una camera screen que dialogue con tu map screen en Jetpack Compose.

Cómo conectar los intents de tracking con la selección de marcadores

Todo arranca en el view model. Necesitas dos intents nuevos que controlen cuándo aparece y desaparece el diálogo con las fotos de cada punto.

La lógica es directa: al tocar un marcador, se guarda esa localización como selectedLocation dentro del estado. Esa variable ya existía, pero ahora el intent se encarga de actualizarla. Cuando el usuario descarta el diálogo, un dismiss la limpia y el tracking se reanuda [01:10].

¿Qué hace el intent dismissDialog? Limpia la localización seleccionada en el estado y permite que el recorrido continúe registrándose con normalidad después de cerrar la galería.

Este flujo respeta una regla clave del tracking: mientras tomas una foto, el recorrido se pausa, la foto se ancla a la última localización conocida y luego se retoma el registro.

Cómo crear marcadores personalizados con PhotoCluster

Dentro de la carpeta map, creas un archivo llamado PhotoCluster. Este composable recibe una localización que ya viene con su lista de fotos y dibuja un marcador distinto al estándar de Google Maps.

La idea es sencilla pero efectiva:

Si el punto contiene fotos, se toma la primera del listado.
Se verifica que el archivo exista y sea legible.
Se transforma en una imagen redonda usando la función de extensión asImageBitmap [02:30].
Se añade un badge con el número total de fotos del punto.
Si algo falla en la lectura, se muestra un icono por defecto.

Para la UI usas un Box con un Modifier de Compose, ajustando size, alignment, border y clickable. Es una pieza pequeña que cambia por completo la lectura visual del mapa: en vez de pines genéricos, ves miniaturas de tus propias fotos.

Cómo pintar todos los marcadores con ClusterSection

Siguiendo el mismo patrón de PolylineSection y MapSection, creas un ClusterSection que se encarga de renderizar todos los marcadores con foto.

El flujo es:

Recibes la lista completa de localizaciones.
Filtras solo aquellas que tienen fotos asociadas.
Por cada una, extraes latitud y longitud para crear un PhotoMarkerState.
Conectas el click del marcador al intent selectLocation, que dispara el diálogo.

Este section vive dentro del MapSection principal, junto a las polilíneas, y consume las locations y las actions del estado.

Cómo construir la galería de fotos con HorizontalPager

La última pieza es PhotoGallery, un composable que aparece cuando el usuario toca un marcador con fotos.

Aquí entran varias herramientas de Compose:

HorizontalPager para deslizar entre las imágenes una a una.
MutableStateOf para controlar qué foto está maximizada.
Funciones de extensión para convertir los archivos en bitmaps listos para pintar.
La anotación ExperimentalFoundationApi por el uso del pager [04:15].

Cada foto es clickable: al tocarla se abre un segundo diálogo que la muestra en grande, con un icono de cierre tomado de Icons.Default.Close de Material 3.

¿Qué es un HorizontalPager en Compose? Es un componente que permite deslizar horizontalmente entre vistas, ideal para galerías de imágenes donde cada página muestra una foto distinta.

Todo este composable se envuelve en un PhotoGalleryDialog, que reutiliza el patrón de diálogo que ya viste en la sección de permisos.

Cómo enlazar la galería con el estado del mapa

En MapSection declaras selectedLocation como un LocationWithTimestamp que puede ser nulo. La condición es clara: si la localización seleccionada no es nula, se muestra el PhotoGalleryDialog.

El ciclo completo queda así:

Tocas el icono de cámara y el tracking se pausa.
Tomas las fotos y se crea un punto en el mapa.
Tocas el marcador y aparece el diálogo con la galería.
Cierras el diálogo con dismiss y el tracking se reanuda.

Cómo se comporta la app al probarla en el emulador

Al correr la app y activar Play route, el recorrido empieza a dibujarse. Tomas una foto con la cámara trasera, otra con la frontal, y al pausar verás el marcador con la miniatura redonda sobre la ruta.

Al tocarlo, el diálogo despliega ambas fotos en la galería deslizable. Si tocas una, se maximiza. Si cierras, vuelves al mapa y el recorrido continúa.

Hay un detalle importante que notarás: al cerrar la aplicación y volver a abrirla, todas las rutas se pierden. Ninguna localización ni foto queda guardada porque el estado vive solo en memoria. La solución llega en clases posteriores con servicios en segundo plano, que permiten mantener el tracking activo incluso con la app cerrada.

¿Ya probaste tu propio diseño de marcador personalizado? Comparte en los comentarios qué variante de UI construiste para tu galería.

Resumen

Cómo conectar los intents de tracking con la selección de marcadores

Todo arranca en el view model. Necesitas dos intents nuevos que controlen cuándo aparece y desaparece el diálogo con las fotos de cada punto.

¿Qué hace el intent dismissDialog? Limpia la localización seleccionada en el estado y permite que el recorrido continúe registrándose con normalidad después de cerrar la galería.

Este flujo respeta una regla clave del tracking: mientras tomas una foto, el recorrido se pausa, la foto se ancla a la última localización conocida y luego se retoma el registro.

Cómo crear marcadores personalizados con PhotoCluster

La idea es sencilla pero efectiva:

Si el punto contiene fotos, se toma la primera del listado.
Se verifica que el archivo exista y sea legible.
Se transforma en una imagen redonda usando la función de extensión asImageBitmap [02:30].
Se añade un badge con el número total de fotos del punto.
Si algo falla en la lectura, se muestra un icono por defecto.

Cómo pintar todos los marcadores con ClusterSection

Siguiendo el mismo patrón de PolylineSection y MapSection, creas un ClusterSection que se encarga de renderizar todos los marcadores con foto.

El flujo es:

Recibes la lista completa de localizaciones.
Filtras solo aquellas que tienen fotos asociadas.
Por cada una, extraes latitud y longitud para crear un PhotoMarkerState.
Conectas el click del marcador al intent selectLocation, que dispara el diálogo.

Este section vive dentro del MapSection principal, junto a las polilíneas, y consume las locations y las actions del estado.

Cómo construir la galería de fotos con HorizontalPager

La última pieza es PhotoGallery, un composable que aparece cuando el usuario toca un marcador con fotos.

Aquí entran varias herramientas de Compose:

HorizontalPager para deslizar entre las imágenes una a una.
MutableStateOf para controlar qué foto está maximizada.
Funciones de extensión para convertir los archivos en bitmaps listos para pintar.
La anotación ExperimentalFoundationApi por el uso del pager [04:15].

Cada foto es clickable: al tocarla se abre un segundo diálogo que la muestra en grande, con un icono de cierre tomado de Icons.Default.Close de Material 3.

¿Qué es un HorizontalPager en Compose? Es un componente que permite deslizar horizontalmente entre vistas, ideal para galerías de imágenes donde cada página muestra una foto distinta.

Todo este composable se envuelve en un PhotoGalleryDialog, que reutiliza el patrón de diálogo que ya viste en la sección de permisos.

Cómo enlazar la galería con el estado del mapa

El ciclo completo queda así:

Tocas el icono de cámara y el tracking se pausa.
Tomas las fotos y se crea un punto en el mapa.
Tocas el marcador y aparece el diálogo con la galería.
Cierras el diálogo con dismiss y el tracking se reanuda.

Cómo se comporta la app al probarla en el emulador

Al tocarlo, el diálogo despliega ambas fotos en la galería deslizable. Si tocas una, se maximiza. Si cierras, vuelves al mapa y el recorrido continúa.

¿Ya probaste tu propio diseño de marcador personalizado? Comparte en los comentarios qué variante de UI construiste para tu galería.

Introducción a la Integración Nativa en Android

API nativas de Android con Kotlin y Compose

Configuración inicial de proyecto Android con Kotlin DSL y Hilt

Google Maps SDK

Configuración de API key de Google Maps para Android

Creación de marcadores personalizados en Google Maps con Compose

Cómo dibujar polilíneas en mapas con Jetpack Compose

Centrado automático de mapas con Camera Update Factory

Servicios de Localización

Kotlin Flows para medir tiempo en Android

Simulación de ubicación GPS en emulador y dispositivo Android

Modelos de localización propios con Clean Architecture

Callbacks de Android convertidos en Flows

Inyección de dependencias para observar localización en Android

LocationTracker con StateFlow para rastreo en Android

State Flows para controlar localización y tiempo en Kotlin

Configuración y pruebas de Location Tracker en Android

Integración Maps con Localización

Integración de ubicación actual en mapas interactivos

Creación de polilíneas con datos reales en mapas de Android

Integración de intents y estados en pantalla mapa con Compose

TrackingMapViewModel con Hilt y StateFlow

Manejo de permisos

Permisos de Android en tiempo de ejecución

Creación de diálogos de permisos reutilizables en Android

Gestión de permisos de localización y notificaciones en Android

Implementación de solicitud de permisos con LaunchedEffect en Compose

Integración cámara

Cómo guardar fotos en Android con PhotoHandler

Conversión de Bitmaps a Byte Arrays con Extension Functions

CameraViewModel con Hilt y StateFlow

Configuración de métodos del ViewModel para gestión de cámara

Integración de CameraX con Jetpack Compose en Android

Creación de pantalla de previsualización de fotos con Jetpack Compose

Galería de fotos en marcadores del mapa

Servicios en Android

Servicios en segundo plano en Android

Configuración de foreground services y notificaciones en Android

Transmisiones en Android (Broadcast)

Broadcast Receivers para escuchar eventos del sistema en Android

Prueba completa de aplicación Android con cámara y localización

Galería de fotos en marcadores del mapa