API Конструктора карт

Конструктор карт — простой в использовании веб-инструмент, позволяющий создавать схемы проезда и отмечать нужные объекты на карте. Данную карту затем можно разместить на своем сайте или в блоге, в том числе в рамках платного API.

Чтобы разместить карту на странице, достаточно вставить на эту страницу код виджета, сформированный конструктором.

С помощью Конструктора можно создать два типа карт: интерактивную и статическую. Для интерактивной карты Конструктор формирует элемент script, который подгружает на страницу JavaScript-код для создания карты. Для статической карты Конструктор формирует элемент img, который содержит ссылку на страницу, выполняющую переадресацию 301 с указанными параметрами карты на Static API.

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

Интерактивная карта

Интерактивная карта вставляется на страницу с помощью элемента script. В атрибуте src могут быть заданы следующие параметры карты:

  • um — идентификатор карты (обязательный параметр).

    Пример значения параметра: um=constructor%3A834e99a97453487e0b040c9619...

    Примечание. В предыдущих версиях Конструктора идентификатор карты задавался через параметр sid. Пример: sid=29uD3jKC-8XFdTlfCwkxSmnSQkYPbrYH. Этот параметр является устаревшим.
  • width — ширина карты в пикселях или процентах. Если параметр не задан, карта растягивается по всей ширине родительского контейнера;
  • height — высота карты в пикселях или процентах. Если параметр не задан, карта растягивается по всей высоте родительского контейнера. Если параметр указан в процентах, то необходимо выставить высоту для родительского контейнера, в противном случае карта не отобразится.
  • id — идентификатор DOM-элемента, в который нужно вставить карту. Указывается в том случае, если виджет вставлен на страницу в элемент <head>.
  • lang — локаль. Поддерживаются следующие значения: ru_RU (по умолчанию), ru_UA, uk_UA, en_RU, en_US, tr_TR. Подробнее в разделе Локализация карты.
  • scroll — включить поведение «масштабирование карты колесом мыши». Принимает значение true.
  • apikey — API-ключ от платной лицензии API Карт. Необходимо передавать в случае, если карта используется в коммерческих целях. Подробнее см. в разделе Использование платной версии API.
Примечание. Виджет может быть добавлен как в элемент body, так и в элемент head. Если код вставлен в элемент head, то в атрибуте src необходимо указать параметр id.

Если один и тот же код с одинаковым id вставлен на страницу несколько раз, то в DOM-элемент с указанным id будут вставлены все карты.

Ниже рассмотрены различные примеры размещения на странице интерактивной карты.

Пример 1. Вставка интерактивной карты с указанием размеров
<!DOCTYPE html>
<html>
    <head>
        <title>Пример с интерактивной картой</title>
    </head>
    <body>
        <div style="width: 300px; height: 200px;">
            <script type="text/javascript" charset="utf-8" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A053bd947d462cc1a45aeba4070defff75501905071c0eaf68436ac9976ec698c&amp;width=514&amp;height=326"></script>
        </div>
    </body>
</html>
Пример 2. Вставка интерактивной карты в определенный контейнер
<!DOCTYPE html>
<html>
    <head>
        <title>Пример с интерактивной картой в определенном контейнере</title>
        <script type="text/javascript" charset="utf-8" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A053bd947d462cc1a45aeba4070defff75501905071c0eaf68436ac9976ec698c&amp;width=514&amp;height=326&amp;id=mymap"></script>
    </head>
    <body>
        <div id="mymap"></div>
    </body>
</html>

Пример 3. Вставка интерактивной карты в контейнер с заданными размерами

<!DOCTYPE html>
<html>
    <head>
        <title>Пример с интерактивной картой в определенном контейнере с назначенными размерами</title>
        <script type="text/javascript" charset="utf-8" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A053bd947d462cc1a45aeba4070defff75501905071c0eaf68436ac9976ec698c&amp;id=mymap"></script>
    </head>
    <body>
        <div id="mymap" style="width: 300px; height: 200px"></div>
    </body>
</html>

Статическая карта

Статическая карта вставляется на страницу с помощью элемента img. Параметры карты, которые могут быть заданы в атрибуте src:

  • um — идентификатор карты (обязательный параметр).

    Пример значения параметра: um=constructor%3A834e99a97453487e0b040c9619...

    Примечание. В предыдущих версиях Конструктора идентификатор карты задавался через параметр sid. Пример: sid=29uD3jKC-8XFdTlfCwkxSmnSQkYPbrYH. Этот параметр является устаревшим.
  • width — ширина карты в пикселях (если не задана, берется из сохраненных параметров карты);
  • height — высота карты в пикселях (если не задана, берется из сохраненных параметров карты).
  • lang — локаль. Поддерживаются следующие значения: ru_RU (по умолчанию), ru_UA, uk_UA, en_RU, en_US, tr_TR. Подробнее в разделе Локализация карты.
  • apikey — API-ключ от платной лицензии API Карт. Необходимо передавать в случае, если карта используется в коммерческих целях. Подробнее см. в разделе Использование платной версии API.
Примечание. Строка кода может быть вставлена только в элемент body.

Ниже рассмотрены примеры размещения статической карты на странице.

Пример 1. Вставка статической карты без указания размеров
<!DOCTYPE html>
<html>
    <head>
        <title>Пример со статической картой</title>
    </head>
    <body>
        <img src="https://api-maps.yandex.ru/services/constructor/1.0/static/?um=constructor%3A053bd947d462cc1a45aeba4070defff75501905071c0eaf68436ac9976ec698c&amp;lang=ru_RU" alt="" style="border: 0;" alt=""/>
    </body>
</html>
Пример 2. Вставка статической карты с указанием размеров
<!DOCTYPE html>
<html>
    <head>
        <title>Пример со статической картой</title>
    </head>
    <body>
        <img src="https://api-maps.yandex.ru/services/constructor/1.0/static/?um=constructor%3A053bd947d462cc1a45aeba4070defff75501905071c0eaf68436ac9976ec698c&amp;width=500&amp;height=400&amp;lang=ru_RU" alt="" style="border: 0;" />
    </body>
</html>

Использование платной версии API

Платный API предназначен для использования в коммерческих целях. Его можно использовать в закрытых системах, приложениях и программных модулях. В платной версии нет ограничений стандартной лицензии.

Платная версия распространяется как на интерактивные, так и на статические карты.

Для использования платной версии API необходимо в коде виджета указать параметр apikey — API-ключ, полученный в кабинете разработчика. Например:

<script type="text/javascript" charset="utf-8" src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A053bd947d462cc1a45aeba4070defff75501905071c0eaf68436ac9976ec698c&amp;apikey=<API-ключ>"></script>