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

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

Задача на три минуты

🤔 Что делаем: добавляем интерактивную карту Яндекса на свой сайт, чтобы показать схему проезда или где находится офис или пункт выдачи. Для этого будем использовать возможности эмбеда.

🕔 Время: 3 минуты.

Понадобится: аккаунт в Яндексе.

👉 Коротко суть: у карт Яндекса есть специальный сервис, который помогает сделать интерактивный фрагмент карты местности и добавить туда нужные обозначения — например, где находится офис или как до него добраться.

Собираем карту

Входим в свой аккаунт, переходим на страницу конструктора карт Яндекса и нажимаем «Создать карту»:

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

Перед нами откроется панель конструктора, где мы можем подготовить карту — добавить на неё нужные объекты и области:

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

Например, если нам нужно показать, где именно находится офис или точка выдачи заказов, используем кнопку «Метки» — она добавит метку на карту, а мы заполним её описание:

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

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

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

Когда на карту добавлено всё, что нужно, нажимаем «Сохранить и продолжить».

Получаем код для вставки

Всё, что нужно от нас на этом этапе, — подобрать размеры и начальный масштаб карты. Так как нам нужна интерактивная версия карты, выбираем вариант «Вставить на сайт» и «Интерактивная карта»:

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

Когда масштаб выбран — нажимаем «Получить код карты» и копируем себе код вставки:

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

JavaScript или iframe?

Если у вас на сайте есть возможность вставить готовый код JavaScript, выбирайте его — это более современный и надёжный подход. 

Иногда системы управления контентом «режут» такой код. Если у вас он не заработает, попробуйте iframe. Справедливости ради, если вам «зарезали» JS, то iframe, вероятнее всего, тоже зарежут. 

Добавляем код на сайт

Последнее, что нам осталось сделать, — добавить код в нужное место на сайте. Например, чтобы добавить карту сразу после заголовка страницы, достаточно вставить код после тега <h1>:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Карта</title>

</head>
<body>

	<h1>Добавляем карту на страницу</h1>

	<script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A6b66280b83cdf1611d547ce5796e33a51a5b5e1228da0a1fe5beb70106635ee7&width=759&height=543&lang=ru_RU&scroll=true"></script>

</body>
</html>
Как добавить интерактивную карту на сайт

Ограничение

Работоспособность карты зависит от сервисов Яндекса. Если что-то изменится, поменяется формат данных или сами сервисы Яндекса будут «лежать», то встроенный код работать не будет. 

Правда, это довольно маловероятно, учитывая то, что Яндекс выдержал самую крупную в истории интернета DDoS-атаку. Кстати: 

Веб-разработка — это новый чёрный
На базе веб-технологий делают всё — от сложного софта до высокобюджетных игр. Изучите технологии и начните карьеру в ИТ. Старт бесплатно. Попробуйте, вдруг вам понравится.
Изучить
Веб-разработка — это новый чёрный

Текст:

Михаил Полянин

Редактор:

Максим Ильяхов

Художник:

Даня Берковский

Корректор:

Ирина Михеева

Вёрстка:

Кирилл Климентьев

Соцсети:

Олег Вешкурцев

Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
Улучшаем автоматизацию новостей
Улучшаем автоматизацию новостей

И получаем готовый рабочий продукт.

easy
Uncaught SyntaxError: Unexpected end of input — что это значит?
Uncaught SyntaxError: Unexpected end of input — что это значит?

Скорее всего, вы забыли закрыть скобки при объявлении функции.

easy
Простейший генератор текста на цепях Маркова
Простейший генератор текста на цепях Маркова

Выдаёт любой текст на любую тему.

medium
Пианино на JavaScript для Chrome
Пианино на JavaScript для Chrome

Не «Мир Дикого запада», но тоже сгодится.

medium
Что означает ошибка UnboundLocalError: local variable referenced before assignment
Что означает ошибка UnboundLocalError: local variable referenced before assignment

Одна из самых частых ошибок у начинающих в Python.

easy
Как добавить кнопки «Поделиться» на страницу
Как добавить кнопки «Поделиться» на страницу

Простой рецепт от Яндекса.

easy
Делаем форму обратной связи на сайте

Говорят, что если программист может написать форму обратной связи, он может написать всё.

easy
Что означает ошибка ReferenceError: Invalid left-hand side in assignment
Что означает ошибка ReferenceError: Invalid left-hand side in assignment

Скорее всего, вы используете оператор присваивания вместо сравнения.

easy
Свой текстовый редактор: делаем красиво
Собственный текстовый редактор: делаем красиво

Самое простое и полезное введение в CSS.

medium
Как сделать красивый сайт на Вордпрессе

Быстрее, чем экспресс-дизайн. Дешевле, чем экспресс-дизайн. Лучше, чем экспресс-дизайн.

medium
easy