Встраиваемый виджет карты и маршрутов

Добавьте карту OSRMRoute с поиском адресов и маршрутами через скрипт или iframe. Тема и адаптивный размер настраиваются; API используется по вашему тарифу.

Предпросмотр

Скопируйте и встроите

Используйте скрипт или iframe. Сборка не требуется.

Скрипт + 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

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

Используйте отдельный ключ виджета, ограничьте его доменом и следите за расходом. Ключи в браузере видны посетителям. Панель

Настройки

Атрибут	Значения	Описание
data-key	YOUR_API_KEY	Ваш API-ключ OSRMRoute; ограничьте его доменом.
data-theme	dark \| light	Цветовая тема; по умолчанию тёмная.
data-accent	06b6d4	Цвет акцента hex без # для кнопок и линии маршрута.
data-center	40.37,49.89	Начальный центр карты в порядке lat,lon.
data-profile	driving \| cycling \| walking	Профиль по умолчанию; доступность зависит от регионального покрытия.
data-lang	en \| az \| tr \| ru …	Язык результатов поиска.
data-height	480px	Высота виджета; можно задать через CSS.
data-powered	true \| false	Показать или скрыть знак Powered by OSRMRoute.

Для iframe передавайте те же настройки как параметры запроса. ?theme=light&accent=22c55e

Сценарии использования

Поиск филиалов

Помогите посетителям найти ваши адреса и построить маршрут.

Время поездки для доставки

Оцените дорожное расстояние и время до склада.

Планирование маршрута

Добавьте направления от начала до назначения для поездок и выездных команд.

Контактная страница

Покажите интерактивную карту в визуальном стиле компании.

Начните интеграцию

Создайте ключ API, ограничьте доменом и добавьте пример кода.

Получить API-ключ Документация