En este tutorial se explica cómo crear un proceso reutilizable para dibujar rutas y marcadores en un mapa, algo muy usado en apps de:
Delivery
Taxis
Seguimiento en tiempo real
Geolocalización
La idea es crear una función simple que reciba:
Dirección de origen
Dirección de destino
El mapa
Y automáticamente dibuje la ruta y los marcadores.
Objetivo del proceso
Mostrar en el mapa:
- Marcador de origen
- Marcador de destino
Ruta entre ambos
Este proceso se reutiliza en muchas pantallas de una app.
Paso a paso del proceso
Preparar el mapa y las direcciones
Primero se tiene:
- Un mapa en pantalla
- Dos campos de texto (origen y destino)
- Datos guardados en base local o base de datos
Las direcciones pueden venir de:
- Base de datos
- GPS
- Usuario
- Pedido de delivery
En el ejemplo, se guardan en base local para ver cambios en tiempo real.
Enviar datos al proceso
El proceso necesita:
- Latitud origen
- Longitud origen
- Latitud destino
- Longitud destino
- El elemento mapa
Importante:
El mapa siempre debe enviarse como call element completo.
Si no se envía así, el proceso no funcionará.
Dibujar la ruta en el mapa
El sistema calcula la ruta entre origen y destino.
Luego modifica el mapa:
- Agrega la ruta
- Usa latitud y longitud
- Se dibuja automáticamente
Por defecto:
- Ruta roja
- Marcadores rojos
Agregar marcadores
Se colocan dos marcadores:
- Origen
- Destino
Cada marcador necesita:
- Latitud
- Longitud
Esto permite ver en el mapa:
- Dónde inicia el recorrido
- Dónde termina
Automatizar el proceso en tiempo real 
Cuando se actualizan las direcciones:
- Se guardan en base local
- Se ejecuta el proceso
- El mapa se actualiza solo
Ideal para tracking en vivo.
Opciones avanzadas del proceso
Cambiar color de la ruta
Puedes enviar:
- Color personalizado
- Estilo de ruta
Ejemplo:
- Ruta azul
- Ruta verde
Si no se configura bien, no cambia el color.
Hay que enviar correctamente la propiedad dentro del mapa.
Cambiar iconos de marcadores
Puedes usar:
- Icono conductor
- Icono cliente
- Logo personalizado
Esto se configura enviando imágenes al marcador.
Recomendación: guardar imágenes en Firebase o base de datos.
Agregar nombres a los marcadores
Puedes mostrar:
- Nombre del conductor
- Dirección destino
- Nombre del usuario
Ejemplo:
- “Driver”
- “Casa”
Usar múltiples rutas en un mismo mapa
Esto es clave 
Cada ruta tiene un nombre interno.
Si usas el mismo nombre:
Se sobrescribe la ruta anterior
Si usas nombres distintos:
Puedes mostrar varias rutas
Ejemplo:
- Ruta conductor → tienda
- Ruta tienda → casa
Esto se logra enviando un nombre de ruta único.
Cómo funciona internamente
El proceso modifica propiedades del mapa:
- routes.nombreRuta.origin.lat
- routes.nombreRuta.destination.lat
- markers.nombre.lat
- markers.nombre.lng
Se usan concatenaciones para indicar qué parte del mapa modificar.
Es una estructura dinámica para reutilizar el proceso.
Centrar el mapa correctamente
Después de crear los marcadores:
Se recomienda agregar un delay de 1-2 segundos.
Luego ejecutar:
center markers
¿Por qué?
Porque a veces el mapa intenta centrarse antes de que los marcadores existan.
Buenas prácticas
Enviar siempre latitud y longitud
Enviar el mapa como elemento completo
Usar nombres únicos para rutas
Guardar iconos en base de datos
Agregar delay antes de centrar
Casos de uso reales
Este proceso sirve para:
- Apps de taxi
- Apps de delivery
- Seguimiento de repartidores
- Tracking en tiempo real
- Mapas logísticos
Es una función que se reutiliza en muchas pantallas.
Dudas comunes
¿De dónde salen las direcciones?
De base de datos, GPS o inputs del usuario.
¿Puedo usar varias rutas?
Sí, usando nombres distintos para cada ruta.
¿Puedo cambiar iconos?
Sí, enviando imágenes personalizadas.
¿Es complejo?
No. Es un proceso simple pero muy reutilizable.
Conclusión
En este tutorial se creó un proceso para:
- Dibujar rutas
- Agregar marcadores
- Personalizar mapas
- Reutilizar lógica
Es una función esencial en apps con geolocalización.
Aunque es sencilla, se usa constantemente en proyectos reales.
Síguenos para más contenido de desarrollo y no-code
Web: https://www.lionsoft.app/
TikTok: TikTok - Make Your Day
Facebook: LionSoft - Casa de desarrollo | San Francisco CA
Telegram: @lionsoftapp