Widget de mapas y rutas integrable

Añade un mapa OSRMRoute con búsqueda de direcciones y rutas por script o iframe. El tema y tamaño adaptable son configurables; el uso API sigue tu plan.

Vista previa en vivo

Copiar e integrar

Usa el script o un iframe. No hace falta compilar.

Script + div

<div data-osrmroute-map
     data-key="YOUR_API_KEY"
     data-theme="dark"
     style="height:480px"></div>
<script src="https://osrmroute.com/embed.js" async></script>

Iframe sencillo

<iframe
  src="https://osrmroute.com/embed/route?key=YOUR_API_KEY&theme=dark"
  style="width:100%;height:480px;border:0;border-radius:16px"
  loading="lazy" allow="geolocation"></iframe>

Usa una clave exclusiva del widget, restríngela a tu dominio y controla su uso. Las claves del navegador son visibles para visitantes. Panel

Configuración

Atributo	Valores	Descripción
data-key	YOUR_API_KEY	Tu clave API OSRMRoute; restríngela a tu dominio.
data-theme	dark \| light	Tema de color; oscuro por defecto.
data-accent	06b6d4	Color de acento hex sin # para botones y línea de ruta.
data-center	40.37,49.89	Centro inicial del mapa en orden lat,lon.
data-profile	driving \| cycling \| walking	Perfil predeterminado; disponible según cobertura regional.
data-lang	en \| az \| tr \| ru …	Idioma de los resultados de búsqueda.
data-height	480px	Altura del widget; también configurable por CSS.
data-powered	true \| false	Mostrar u ocultar la marca Powered by OSRMRoute.

Para iframe, envía las mismas opciones como parámetros de petición. ?theme=light&accent=22c55e

Casos de uso

Localizador de tiendas

Ayuda a encontrar tus direcciones y obtener rutas.

Tiempo de viaje de entrega

Estima la distancia por carretera y el tiempo al almacén.

Planificador de rutas

Añade indicaciones entre origen y destino para viajes o equipos de campo.

Página de contacto

Muestra un mapa interactivo con el estilo de tu empresa.

Comenzar integración

Crea una clave API, restríngela al dominio y añade el código.

Obtén tu clave API Documentación