Как добавить карту на сайт: Яндекс Карты, 2ГИС и что делать с несколькими филиалами

Зачем карта на сайте и где её ставить

Карта отвечает на вопрос «как к вам добраться» быстрее любого текста. Но одна карта мало что даёт, если нет ориентиров. Хороший блок «Как нас найти» состоит из:

• адреса текстом — его копируют в навигатор;
• карты с меткой;
• ориентиров: «вход со двора, вывеска над аптекой, домофон 12»;
• фото входа или фасада;
• парковки и ближайшего транспорта;
• часов работы и телефона.

Карта нужна на странице контактов и в подвале главной страницы, если у вас точка, куда приезжают клиенты: салон, клиника, магазин, шоурум, автосервис. Сервисной компании, которая сама выезжает к клиенту, карта офиса часто не нужна вовсе. Вместо неё лучше карта зоны обслуживания или список районов.

Способ 1: виджет организации из Яндекс Карт

Если ваша компания уже есть в Яндекс Картах, это самый быстрый путь. По справке Яндекс Карт код для вставки получают так: на карте открыть меню и выбрать «Поделиться», в открывшемся окне скопировать нужный код. Доступны два виджета:

• виджет карты — интерактивная карта с вашей точкой;
• виджет отзывов — отзывы о вашей организации из Карт.

Код вставляется в HTML страницы как есть. Плюс способа — карта сама показывает актуальные данные из Карт. Минус — мало настроек внешнего вида.

Как добавить сайт на Яндекс Карты

Этот хвост запроса часто путают с основным. «Добавить карту на сайт» — это встроить карту в свою страницу. «Добавить сайт на Яндекс Карты» — это зарегистрировать организацию в Картах, чтобы люди находили вас в поиске по картам. Делается это через Яндекс Бизнес по инструкции о добавлении организации: указываете название, адрес, контакты и сайт, подтверждаете права на организацию. После проверки компания появляется в Картах вместе со ссылкой на ваш сайт.

Если компания уже в Картах, но её плохо видно среди конкурентов, — это отдельная задача. Мы разбирали её в статье о продвижении в Яндекс Картах.

Способ 2: конструктор карт Яндекса

Конструктор карт нужен, когда хочется больше, чем одна метка:

• несколько меток с подписями и описаниями;
• линии — например, путь от остановки до входа;
• многоугольники — зона доставки или обслуживания;
• свой цвет и стиль меток.

Как это работает:

1. Откройте конструктор и создайте новую карту.
2. Найдите адрес и поставьте метку, добавьте название и описание: «Вход со стороны двора».
3. При необходимости нарисуйте линию маршрута или зону.
4. Сохраните карту и нажмите получение кода.
5. Выберите тип: интерактивная карта (можно двигать и приближать) или статическая (картинка, легче для страницы).
6. Укажите размеры: ширину обычно 100%, высоту 350–450 пикселей.
7. Скопируйте код и вставьте его на страницу.

Статическая карта загружается быстрее и подходит, если человеку нужно просто увидеть, где вы. Интерактивная нужна, если он будет прокладывать маршрут или смотреть окрестности.

Способ 3: виджет 2ГИС

В некоторых городах 2ГИС популярнее Яндекс Карт, особенно в Сибири. Если ваши клиенты пользуются 2ГИС, логично показывать карту оттуда. У 2ГИС есть бесплатный конструктор карт: ставите метки, настраиваете вид и получаете код для вставки. Карточки организаций из справочника 2ГИС тоже можно встроить на сайт.

Нужно ли вашей компании платное размещение в 2ГИС, мы разбирали отдельно в статье 2ГИС для бизнеса: стоит ли платить.

Сравнение способов: что выбрать

Для большинства малых бизнесов хватает первых трёх способов. JavaScript API — инструмент для разработчиков, когда нужна карта с фильтрами, поиском ближайшего филиала или выводом объектов из базы данных.

Как вставить карту на сайт: Тильда и HTML

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

У Тильды два пути.

Готовые блоки. По справке Тильды о картах блоки с картами находятся в категории «Контакты» (CN401, CN402, CN402A, CN403, T143). В настройках блока можно добавить несколько маркеров по координатам, соединить их маршрутом и выбрать стиль карты.

Для Яндекс Карт в этих блоках нужен ключ. По инструкции Тильды его получают в кабинете разработчика Яндекса (продукт JavaScript API), в ограничениях по HTTP Referrer указывают свой домен и домен tilda.cc, чтобы карта показывалась и в редакторе. Затем ключ вставляют в «Настройки сайта» → «Ещё» → «Ключи от API карт». У бесплатного использования API есть лимиты и условия — проверьте их в кабинете разработчика перед запуском.

Код из конструктора или виджета. Если не хочется возиться с ключом, вставьте код из конструктора Яндекс Карт или виджет из Карт в HTML-блок (T123). Карта будет работать без ключа в настройках Тильды. Как вставлять сторонний код на Тильду, мы разбирали в статье как вставить код в Тильду.

Если карта не отображается в опубликованной версии, проверьте домен в ограничениях ключа и подождите: по справке Тильды ограничения вступают в силу в течение пяти минут.

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

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

Если сайт свёрстан вручную или на CMS, порядок такой:

1. Получите код в конструкторе карт или через «Поделиться» в Картах.
2. Откройте шаблон нужной страницы или HTML-блок в редакторе CMS.
3. Вставьте код в то место, где должна быть карта, — например, после заголовка «Как нас найти».
4. Для адаптивности оберните карту в контейнер с шириной 100% и фиксированной высотой.
5. Проверьте страницу на телефоне: карта не должна вылезать за экран и перехватывать прокрутку.

Последний пункт важен. Интерактивная карта на телефоне часто «ловит» палец: человек хочет пролистать страницу, а вместо этого двигает карту. Решения — статическая карта со ссылкой «Открыть в Яндекс Картах», отключение прокрутки карты до клика или меньшая высота блока.

Несколько филиалов: как показать на карте

Частая ошибка — отдельная карта под каждым адресом. Десять карт на одной странице грузятся медленно, а человек всё равно не понимает, какой филиал ближе.

Как сделать правильно:

1. Одна карта со всеми точками. Через конструктор карт или блок Тильды с несколькими маркерами.
2. Список филиалов рядом. Адрес, ближайшее метро или район, часы работы, телефон, кнопка «Маршрут».
3. Связь списка и карты, если позволяет технология: клик по адресу подсвечивает метку.
4. Отдельная страница для каждого филиала, если их больше 3–5 и они в разных районах. На странице — адрес, карта, фото входа, услуги этого филиала. Такие страницы ещё и собирают поисковый трафик по районам.
5. Фильтры, если точек десятки: по району, по услуге, «открыто сейчас». Здесь уже нужен JavaScript API и разработчик.

Убедитесь, что адреса и часы работы на сайте совпадают с карточками каждого филиала в Картах и 2ГИС. Расхождения путают клиентов.

Как карта влияет на скорость сайта

Интерактивная карта загружает скрипты и картографические изображения. На мощном компьютере это незаметно, на телефоне с мобильным интернетом — заметно.

Что делать:

• Ставьте карту внизу страницы. Если она не на первом экране, её загрузка меньше мешает.
• Загрузка по клику. Вместо карты показывается картинка-превью с кнопкой «Показать карту». Скрипт грузится, только когда человек нажал.
• Статическая карта вместо интерактивной там, где не нужно двигать и приближать.
• Одна карта на странице.

Проверить влияние можно в инструментах для замера скорости: сравните результаты страницы с картой и без неё. Подробнее о том, как измерять и ускорять загрузку, — в статье скорость загрузки сайта.

Условный пример: что даёт нормальный блок «Как нас найти»

Пример условный, не кейс студии. Стоматология в Екатеринбурге, вход со двора, на сайте был только адрес текстом.

Цифры условные. Но опоздание пациента на 15 минут сдвигает весь график врача, а каждый звонок «как пройти» отвлекает администратора от записи новых пациентов. Блок на полчаса работы снимает эту нагрузку.

Чек-лист: карта на сайте

1. Компания добавлена в Яндекс Карты (и 2ГИС, если ваши клиенты им пользуются).
2. На странице контактов есть адрес текстом, карта и ориентиры.
3. Есть фото входа и информация о парковке.
4. Для нескольких филиалов — одна карта со всеми точками и список адресов.
5. Карта не перехватывает прокрутку на телефоне.
6. Карта не стоит на первом экране и не тормозит загрузку.
7. На Тильде с блоком Яндекс Карт ключ API указан в настройках, домен прописан в ограничениях.
8. Адреса и часы работы совпадают на сайте и во всех картах.

Карта — одна из деталей, по которым видно, думал ли кто-то о клиенте, когда делал сайт. Если хотите проверить сайт целиком — контакты, формы, скорость, — оставьте заявку.