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.
Mostrar en el mapa:
📍 Marcador de origen
📍 Marcador de destino
🛣️ Ruta entre ambos
Este proceso se reutiliza en muchas pantallas de una app.
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.
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á.
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
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
Cuando se actualizan las direcciones:
Se guardan en base local
Se ejecuta el proceso
El mapa se actualiza solo
💡 Ideal para tracking en vivo.
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.
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.
Puedes mostrar:
Nombre del conductor
Dirección destino
Nombre del usuario
Ejemplo:
“Driver”
“Casa”
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.
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.
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.
✔️ 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
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.
De base de datos, GPS o inputs del usuario.
Sí, usando nombres distintos para cada ruta.
Sí, enviando imágenes personalizadas.
No. Es un proceso simple pero muy reutilizable.
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