Как добавить карту на сайт: виджет Яндекс Карт и кнопка маршрута

Чтобы добавить карту на сайт, откройте нужное место в Яндекс Картах, в меню «Поделиться» скопируйте код из поля «Виджет с картой» и вставьте его в блок страницы, который поддерживает HTML. Рядом оставьте адрес текстом и кнопку «Открыть в Яндекс Картах». Тогда посетитель сможет скопировать адрес или открыть карту отдельно, даже если виджет не загрузится.

Что выбрать для блока «Контакты»

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

Как вставить виджет Яндекс Карт

1. Найдите организацию или адрес на Яндекс Картах. Сверьте город, номер дома и корпус. Для входа со двора добавьте рядом с картой короткую подсказку.
2. Откройте меню в правом верхнем углу карты и выберите «Поделиться». Скопируйте код из поля «Виджет с картой». В том же меню возьмите ссылку для отдельной кнопки. Подробности есть в справке Яндекс Карт.
3. В редакторе сайта поместите код виджета в блок, который принимает HTML или iframe. Если редактор выводит код текстом или удаляет iframe при сохранении, используйте кнопку со ссылкой на карту и оставьте адрес рядом.
4. Откройте опубликованную страницу на телефоне. Карта должна помещаться по ширине, а страницу должно быть удобно прокручивать, не задевая виджет. Нажмите кнопку и убедитесь, что она открывает нужную точку. Если iframe мешает прокрутке или долго загружается, оставьте ссылку либо покажите карту по кнопке.

Пример блока для кафе с входом со двора

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

Для уже созданного проекта передайте в Lovarus такое задание и замените данные в квадратных скобках:

В существующем разделе «Контакты» добавь блок «Как добраться». Покажи адрес [город, улица, дом], часы [расписание] и подсказку [где вход]. Кнопка «Открыть в Яндекс Картах» должна вести по ссылке [ссылка на карточку места]. Ниже вставь этот код виджета [код из Яндекс Карт]. Сделай виджет по ширине блока на телефоне. Адрес, подсказка и кнопка должны оставаться видны, если карта не загрузилась. Остальные блоки страницы сохрани.

После правки проверьте две вещи на опубликованной странице: метка указывает на нужное здание, а ссылка открывает тот же адрес на телефоне. Для проверки без виджета можно временно заблокировать загрузку стороннего содержимого в браузере и убедиться, что адрес и кнопка остаются доступны.

Если сайт ещё предстоит собрать, откройте сценарий сайта кафе в Lovarus с готовым заданием для ИИ и дополните его своими контактами. Если сайт уже работает, сверяйтесь с проверкой мобильной версии, когда будете размещать карту рядом с меню или формой записи.