Implementación de Mapa y Marcadores

Curso de Android: Integración de APIs nativas

Introducción a la Integración Nativa en Android

Integra APIs Nativas en Android

Creación proyecto base

Google Maps SDK

Cómo crear una API key para Google Maps en Google Cloud

Creación de marcadores en Google Maps con Jetpack Compose

Cómo dibujar rutas en mapas usando polilíneas en Jetpack Compose

Cómo enfocar automáticamente mapas usando Camera Update Factory

Quiz: Google Maps SDK

Servicios de Localización

Uso de Flows en Kotlin para Controlar Intervalos de Tiempo y Emisión de Datos

Cómo simular ubicación en emuladores y dispositivos reales

Creación de Modelos y Cálculos de Localización con Clean Architecture

Implementación de Localización en Android Usando Flows

Inyección de dependencia para seguimiento de localización en Android

Uso de StateFlows para rastrear ubicación en aplicaciones Android

Location Tracker

Implementación de Location Tracker con Inyección de Dependencias

Quiz: Servicios de Localización

Integración Maps con Localización

Integración de mapas dinámicos con CameraPositionState en Android

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

Creación de una pantalla de mapa con Intents y estados en Jetpack Compose

Creación de un ViewModel para Seguimiento de Localización en Android

Quiz: Integración Maps con Localización

Manejo de permisos

Gestión de permisos en Android para localización, cámara y notificaciones

Cómo implementar diálogos para solicitar permisos en Android

Manejo de permisos de localización y notificación en Android

Cómo gestionar permisos en Android con Jetpack Compose

Quiz: Manejo de permisos

Integración cámara

Integración de cámara en Android con Photo Handler y manejo de permisos

Convierte Bitmaps a ByteArrays en Android con Kotlin

Creación de intents y estados UI para cámara en Android con Kotlin

Implementación de funciones clave en ViewModel para cámara Android

Integrar CámaraX en Jetpack Compose para Android

Captura y previsualización de fotos en Android con Jetpack Compose

Cómo Mostrar Fotos en Marcadores de Ubicación en Mapas con Jetpack Compose

Quiz: Integración cámara

Servicios en Android

Implementación de servicios en Android: normal services y foreground services

Implementar Foreground Services en Android para Persistencia en Segundo Plano

Quiz: Servicios en Android

Transmisiones en Android (Broadcast)

Implementación de BroadcastReceiver en Android para Escuchar Eventos del Sistema

Pruebas finales y cierre

You don't have access to this class

Keep learning! Join and start boosting your career

If you already have an account,

Resources

Incorporating interactive maps into Android apps is easy with Jetpack Compose. An essential aspect for any app that uses location is to create and manage visual markers directly on the map, indicating specific positions to guide users.

How to create a Composable for maps with Jetpack Compose?

To start, we will organize our elements by creating folders to facilitate the structuring of the code:

First, open your TrackIt project.
Create a folder or package called Presentation.maps.
Inside this folder, add a file called MapsSection to create your first Composable.

In this MapsSection function, use the following basic starter code:

@Composablefun MapsSection(modifier: Modifier)  {    GoogleMap(modifier  = modifier)}

If you are still not clear on how Composable works, you can check out the Jetpack Compose course available on Platzi beforehand.

How to configure map interactions in Android?

Jetpack Compose allows you to fine-tune the user experience by configuring various map features:

Use the UI Settings options, for example:

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

With this setting, you disable the option to zoom the map, allowing only scrolling.

It also has events that notify actions, for example, when the map has finished loading:

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

When executing this code, a small message(Toast) will appear informing that the map is already loaded.

How to add custom markers to the map?

To display specific markers in specific regions of the map, we must follow these steps:

Create a state to locate the marker:

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

Insert marker visually:

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)            )        }    } } }}

This custom marker will be displayed as a circle with a camera icon in the center, useful for applications focused on camera interaction with location.

This way, you have your first interactive marker clearly located on the map, paving the way for adding routes, real-time tracking and other interesting features.

Share in comments how you did implementing these features in your Jetpack Compose application.

Contributions 0

Questions 0

Sort by:

Want to see more contributions, questions and answers from the community?