Creación de marcadores personalizados en Google Maps con Compose

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:008:19

Creación de marcadores personalizados en Google Maps con Compose

Curso de Android: Integración de APIs nativas

Clase 4 de 33

Clase 4 / 33

Recursos

La creación de aplicaciones móviles que integran mapas interactivos puede resultar sencilla y práctica utilizando Jetpack Compose en Android. Este tutorial te guiará en el proceso de crear un marcador personalizado en Google Maps para visualizar ubicaciones específicas con íconos y elementos visuales personalizados usando el marco composable.

¿Cómo crear un composable para mapas en Android?

Para comenzar, prepara una estructura clara dentro del proyecto Android:

Crea un nuevo paquete dentro de tu proyecto llamado presentation.maps.
Dentro de este paquete, genera un archivo llamado map section.

Si no estás familiarizado con la creación de composables, consulta previamente la sección relacionada con Jetpack Compose.

¿Qué pasos seguir para integrar Google Maps en una función composable?

Es esencial ajustar correctamente la función composable con Google Maps que permita configuraciones específicas:

Define la función composable map section con el parámetro modifier.
Aplica el objeto GoogleMap con diversos ajustes visuales y de interacción a través del parámetro UI settings.
Algunas acciones concretas son posibles, por ejemplo:
- Desactivar ajustes como zoom gestures (zoomGesturesEnabled = false).
- Generar notificaciones cuando el mapa termine de cargar, utilizando map loaded.

Para una verificación práctica, ejecuta en un emulador y comprueba que estos ajustes se aplican correctamente, como desactivar la capacidad de realizar zoom o emitir un mensaje (toast) cuando el mapa haya cargado totalmente.

¿Cómo diseñar y mostrar un marcador personalizado?

La inclusión de un marcador personalizado es crucial para señalar ubicaciones exactas en un mapa:

Usa una variable de estado con remember para gestionar cambios en la posición del marcador.
Emplea la función LaunchedEffect para actualizar las coordenadas del marcador.
Al crear tu marcador composable:
- Establece su tamaño (recomendado: 35 dp).
- Aplica una forma circular, un color específico (MaterialTheme.colorScheme.primary) y un ícono interno (en este caso, ícono predeterminado de cámara).
- Realiza alineaciones internas (contentAlignment = Alignment.Center) para asegurar que el marcador quede centrado adecuadamente.

Finalmente, verifica visualmente en tu emulador que el marcador haya sido ubicado correctamente y que cumpla con los requerimientos visuales y de posición para la aplicación.

Después de estos pasos, continuarás aprendiendo cómo trazar recorridos en el mapa empleando polilíneas, crucial para dar seguimiento preciso a los trayectos realizados usando Google Maps con Jetpack Compose.

¿Has probado implementar tus propios marcadores personalizados? Empecemos a explorar más sobre mapas y recorridos en Android juntos.

Resumen

¿Cómo crear un composable para mapas en Android?

Para comenzar, prepara una estructura clara dentro del proyecto Android:

Crea un nuevo paquete dentro de tu proyecto llamado presentation.maps.
Dentro de este paquete, genera un archivo llamado map section.

Si no estás familiarizado con la creación de composables, consulta previamente la sección relacionada con Jetpack Compose.

¿Qué pasos seguir para integrar Google Maps en una función composable?

Es esencial ajustar correctamente la función composable con Google Maps que permita configuraciones específicas:

Define la función composable map section con el parámetro modifier.
Aplica el objeto GoogleMap con diversos ajustes visuales y de interacción a través del parámetro UI settings.
Algunas acciones concretas son posibles, por ejemplo:
- Desactivar ajustes como zoom gestures (zoomGesturesEnabled = false).
- Generar notificaciones cuando el mapa termine de cargar, utilizando map loaded.

¿Cómo diseñar y mostrar un marcador personalizado?

La inclusión de un marcador personalizado es crucial para señalar ubicaciones exactas en un mapa:

Usa una variable de estado con remember para gestionar cambios en la posición del marcador.
Emplea la función LaunchedEffect para actualizar las coordenadas del marcador.
Al crear tu marcador composable:
- Establece su tamaño (recomendado: 35 dp).
- Aplica una forma circular, un color específico (MaterialTheme.colorScheme.primary) y un ícono interno (en este caso, ícono predeterminado de cámara).
- Realiza alineaciones internas (contentAlignment = Alignment.Center) para asegurar que el marcador quede centrado adecuadamente.

Finalmente, verifica visualmente en tu emulador que el marcador haya sido ubicado correctamente y que cumpla con los requerimientos visuales y de posición para la aplicación.

¿Has probado implementar tus propios marcadores personalizados? Empecemos a explorar más sobre mapas y recorridos en Android juntos.

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

Creación de marcadores personalizados en Google Maps con Compose