На базе Yarrow

Встройте живую интерактивную картуза секунды

Один iframe. Любая локация. Полная навигация. Без JavaScript.

Одна строка кода

Вставьте один тег iframe в ваш HTML — и карта работает. Без JavaScript, без настройки API.

Полная настройка

Управляйте локацией, масштабом, маркером и светлой/тёмной темой через параметры URL.

Адаптивность по умолчанию

Встроенная карта адаптируется под любой размер контейнера и работает на десктопе, планшете и мобильном.

Как это работает

Три шага — и ваша карта готова.

01

Скопируйте код

Скопируйте код iframe ниже и откройте HTML-редактор вашего сайта.

02

Вставьте и настройте

Вставьте код туда, где нужна карта, и обновите параметры lat, lon и другие.

03

Опубликуйте

Сохраните и опубликуйте страницу. Интерактивная карта теперь доступна вашим посетителям.

Код для встраивания

Скопируйте и вставьте этот код в HTML вашей страницы, где должна появиться карта, затем обновите значения под вашу локацию.

index.html
Loading...

Вы можете изменить width и height на любой размер, подходящий для вашей страницы.

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

Это реальная встроенная карта — показан Ташкент, Узбекистан. Перемещайте и масштабируйте.

Загрузка предпросмотра…

Параметры настройки

Добавьте параметры к URL после ?, разделяя их &. Например: ?lat=41.29&lon=69.24&zoom=14

ПараметрОбязательныйПримерОписание
api_keyДаYOUR_API_KEYВаш API-ключ Yarrow. Необходим для загрузки карты.
latДа41.2995Широта локации, которую вы хотите показать на карте.
lonДа69.2401Долгота локации, которую вы хотите показать на карте.
zoomНет14Масштаб приближения карты. 1 — весь мир, 20 — уровень улицы. По умолчанию 14.
markerНетtrueУстановите true, чтобы разместить маркер на локации. Оставьте пустым или false для отображения только карты.
themeНетlightВизуальный стиль карты. Выберите light или dark. По умолчанию light.

Как найти координаты

Вам нужны широта и долгота для отображаемой локации.

  1. 1

    Откройте Google Maps в браузере.

  2. 2

    Перейдите к нужной локации.

  3. 3

    Нажмите правой кнопкой мыши на нужную точку на карте.

  4. 4

    Нажмите на координаты вверху контекстного меню (например, 41.2995, 69.2401) — они скопируются в буфер обмена.

  5. 5

    Первое число — это широта (lat), а второе — долгота (lon).

Пример полного URL

Полный URL для встраивания со всеми параметрами выглядит так:

URL для встраивания
Loading...
YarrowYarrow Интерактивные карты

Создано для разработчиков и не только.