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

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

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

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

🕔 Время: 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-атаку. Кстати: 

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

Текст:

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

Редактор:

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

Художник:

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

Корректор:

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

Вёрстка:

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

Соцсети:

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

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

Таймеров и трекеров полно, но мы сделаем такой, какой нужен именно вам. Это легко.

medium
Что означает ошибка IndexError: list index out of range
Что означает ошибка IndexError: list index out of range

Многогранная ошибка с коварным поведением.

easy
Большой разбор: ИИ научился играть в динозаврика из Chrome

Тот редкий случай, когда хочешь остаться без интернета.

medium
Uncaught SyntaxError: Unexpected token
Uncaught SyntaxError: Unexpected token — что это означает?

Самая популярная ошибка у новичков.

medium
Блокировщик соцсетей, который спасёт вашу продуктивность

И поднимет осознанность.

easy
Прогаем в Экселе: автомобиль в кредит или по подписке?
Прогаем в Экселе: автомобиль в кредит или по подписке?

Программерский подход, подручные средства.

easy
Своя игра: создаём собственную «Змейку»

Работы на 10 минут, а удовольствия на целый день.

medium
Как работает язык SQL
Как работает язык SQL

Управляем базой данных из командной строки

medium
Пишем код: как поменять местами значения переменных
Пишем код: как поменять местами значения переменных

Что делать, если третью переменную использовать нельзя.

medium
Как сгенерировать нейросетью любые картинки
Как сгенерировать нейросетью любые картинки

А также каким будет Half-Life 3

medium
easy