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

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

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

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

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

Через Конструктор карт нельзя изменять код виджета, сформированный с помощью элемента iframe.

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

Интерактивная карта вставляется на страницу с помощью элемента 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-ключ не указан, на карте не будут отображаться элементы управления: поисковая строка, кнопки для построения маршрутов и просмотра панорам.

Примечание

Виджет может быть добавлен как в элемент 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&amp;lang=ru_RU&amp;apikey=<API-ключ>"></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&amp;lang=ru_RU&amp;apikey=<API-ключ>"></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&amp;lang=ru_RU&amp;apikey=<API-ключ>"></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 Яндекс Карт.

Строка кода может быть вставлена только в элемент 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>
Следующая
Техническая поддержка