Как сделать интерактивную карту. Яндекс.Карты

С помощью интерактивных карт можно составить экскурсию, собрать справочную информацию об учреждениях или рассказать о масштабных событиях. Расскажем, как наносить данные на Яндекс.Карту на примере московской «Библионочи-2023»: покажем участников и расскажем, какие мероприятия стоит посетить.

Как сделать интерактивную карту и опубликовать её

Чтобы попасть в Конструктор карт, зайдите на сайт Яндекс.Карты и в правом верхнем углу нажмите на три полоски (если вы не авторизованы) или на ваш аватар (если вы авторизованы). Затем в меню слева выберите «Мои карты».

Если карта открылась не в той области, которая вам нужна, сдвиньте её в сторону или напишите название города в поле «Адрес или объект». Точно так же вы можете и добавить первые метки: укажите название или адрес учреждения. Если не знаете адреса, приблизьте карту (например, зажав правую кнопку мыши и выделив область), затем кликните по нужному зданию.

Метки

Добавьте первую точку, кликнув по зданию или введя название библиотеки в поле «Адрес или объект». Задайте название, описание и настройте внешний вид метки. Выберите подходящий цвет и форму, решите, будут ли объекты пронумерованы — или выберите иконку из выпадающего списка.

Маршруты

Инструмент «Линии» поможет соединить точки маршрутом. Нажмите на кнопку — она подсветится желтым — и кликните по нужной точке на карте. Затем найдите вторую точку и кликните на неё.

Когда вы соединили все метки маршрута, нажмите левой кнопкой мыши на последнюю точку и выберите пункт «Завершить». Не забудьте отжать кнопку «Линия», если не планируете рисовать следующий маршрут. Готовые линии можно отредактировать и задать нужные параметры: описание, цвет, прозрачность и толщину.

Области

Можно рисовать не только линии, но и выделять область. Функция называется «Многоугольники». Точки, которые вы расставите, будут образовывать замкнутую фигуру. Нажмите на последнюю левой кнопкой мыши и выберите пункт «Завершить».

У многоугольников можно редактировать:

• описание
• цвет
• прозрачность внутренней заливки
• толщину и прозрачность контура

Экспорт

Проверьте работоспособность карты перед публикацией, убедитесь, что все метки отображаются правильно. В левом нижнем углу нажмите жёлтую кнопку «Сохранить и продолжить». В панели слева выберите варианты «Вставить на сайт» и «Интерактивная карта».

Нажмите слева кнопку «Получить код карты». Переключите вкладку сверху на вариант «iFrame» и скопируйте код. После этого его можно встроить на ваш сайт.