Widget de mapas e rotas incorporável

Adicione um mapa OSRMRoute com pesquisa de endereços e rotas por script ou iframe. O tema e tamanho adaptável são configuráveis; o uso API segue o seu plano.

Pré-visualização em direto

Copiar e incorporar

Use o script ou um iframe. Não é necessário 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 simples

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

Use uma chave dedicada ao widget, restrinja-a ao domínio e acompanhe o uso. Chaves no navegador são visíveis aos visitantes. Painel

Configuração

Atributo	Valores	Descrição
data-key	YOUR_API_KEY	A sua chave API OSRMRoute; restrinja-a ao domínio.
data-theme	dark \| light	Tema de cores; escuro por defeito.
data-accent	06b6d4	Cor de destaque hex sem # para botões e linha da rota.
data-center	40.37,49.89	Centro inicial do mapa na ordem lat,lon.
data-profile	driving \| cycling \| walking	Perfil por defeito; disponibilidade conforme cobertura regional.
data-lang	en \| az \| tr \| ru …	Idioma dos resultados de pesquisa.
data-height	480px	Altura do widget; também configurável por CSS.
data-powered	true \| false	Mostrar ou ocultar a marca Powered by OSRMRoute.

Para iframe, envie as mesmas opções como parâmetros do pedido. ?theme=light&accent=22c55e

Casos de utilização

Localizador de lojas

Ajude os visitantes a encontrar os seus endereços e rotas.

Tempo de viagem de entrega

Estime a distância rodoviária e o tempo até ao depósito.

Planeador de rotas

Adicione indicações entre origem e destino para viagens ou equipas no terreno.

Página de contacto

Apresente um mapa interativo no estilo da empresa.

Começar integração

Crie uma chave API, restrinja-a ao domínio e adicione o código.

Obter sua chave de API Documentação