Как добавить карту на сайт: Яндекс, Google, 2ГИС

Представьте: пользователь нашёл вашу компанию в поиске, зашёл на сайт за картой, а там — просто адрес. Теперь ему нужно копировать текст, открывать отдельное приложение и заново прокладывать маршрут. Чем больше шагов предпринимает человек — тем выше риск, что он передумает и уйдёт к конкуренту. Чтобы этого не случилось, в статье разберём, как добавить карту из популярных сервисов на свой сайт.

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

Вариант 1. Готовый виджет, если уже есть карточка организации. Для установки не нужно регистрироваться в дополнительных сервисах и получать API-ключ. Система автоматически подтягивает название, телефон, часы работы и рейтинг. Как настроить:

1. Откройте yandex.ru/maps и найдите свою организацию.
2. Нажмите на три точки в правом верхнем углу → «Поделиться».
3. Перейдите на вкладку «Виджет», включите предпросмотр и скопируйте код.
4. Вставьте код в HTML-блок на сайте: в Tilda — блок T123 «HTML-код» из категории «Другое», в WordPress — элемент «Пользовательский HTML».

❗️ Важно: виджет работает через iframe — отдельное окно, которое подгружает данные с серверов Яндекса. Внешний вид карты вы не измените: она будет выглядеть так же, как на странице организации.

Вариант 2. Установка вручную через конструктор. Такой способ подойдёт, если организации нет в Яндекс Картах, на сайте нужно показать несколько точек или проложить маршрут. Например, добавить уточнение, что вход со двора, а офис — на третьем этаже. На карте можно поставить свои метки или подписи. Как настроить:

1. Откройте yandex.ru/map-constructor и найдите адрес компании.
2. Поставьте метку, выберите цвет и иконку, добавьте подпись — например, «Вход со стороны парковки».
3. Если у компании несколько филиалов — добавьте остальные адреса.
4. Инструментом «Линии» нарисуйте путь от метро или парковки до входа.
5. Нажмите «Сохранить и продолжить».
6. Выберите тип карты. Интерактивная позволяет менять масштаб и двигать её мышью. Именно её чаще всего выбирают для сайтов. Статическая — это просто картинка: она подходит, если нужно вставить карту в презентацию или PDF.
7. Задайте размер: укажите ширину и высоту в пикселях или выберите «Растянуть по ширине» — тогда карта займёт весь блок на любом экране.
8. Скопируйте код. Конструктор предложит два формата: iframe или JavaScript. Для обычного сайта берите iframe.

❗️ Ограничение: данные о компании из карточки Яндекс Карт не подтягиваются автоматически. Если вы решите добавить больше деталей или изменить схему проезда — придётся обновлять карту вручную.

Вариант 3. JavaScript API — для нестандартных задач. Например, если нужно добавить поиск по объектам, фильтры или собственные данные. Такие карты часто используют сайты-агрегаторы: та же Аптека.ру — там пользователь фильтрует пункты выдачи по способам оплаты и наличию товаров.

Настройку этого варианта доверьте разработчику. В техническом задании опишите:

• какие объекты выделять,
• какие действия пользователь сможет выполнять на карте.

Специалист подключит JavaScript API через ключ из кабинета разработчика Яндекса и настроит виджет под вашу задачу. Если карта нужна только для того, чтобы показать адрес и маршрут — этот метод избыточен. Выберите вариант 1 или 2.

Как вставить Google Карты — и стоит ли это делать в России

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

1. Откройте google.com/maps и найдите организацию или адрес.
2. Нажмите «Поделиться» → «Встраивание карт».
3. Выберите размер карты.
4. Скопируйте HTML-код и установите его на сайт.

Как добавить карту 2ГИС

Вариант 1. Через конструктор. Подходит, если нужно показать адрес, добавить подпись, отметить ориентиры или нарисовать путь до входа. Например, объяснить, как попасть на закрытую территорию. Порядок действий:

1. Откройте makemap.2gis.ru.
2. Введите адрес и найдите нужное здание.
3. Настройте цвет метки, добавьте название и описание.
4. С помощью линий и выделения областей проложите маршрут до ближайшей остановки или любой другой точки.
5. Выберите размер карты, скопируйте код и вставьте его на сайт в HTML-блок.

❗️ Важно: информация на таких картах не обновляется автоматически. Если вы изменили данные — откройте проект в конструкторе и создайте новую карту.

Вариант 2. Через API, если нужен расширенный функционал. Этот метод подходит для сложных сценариев, когда карта не просто показывает адрес, а помогает принимать решения. Например, сервис недвижимости показывает объекты с ценами — пользователь сразу видит, сколько стоят квартиры в нужном районе, и может выбрать вариант без лишних кликов. Реализовать такое через конструктор уже не получится — понадобится помощь разработчика.

➕ Карту адаптируют под задачи сервиса и оформляют в стиле сайта.

➖ Настройка занимает больше времени, самому не установить.

Какие сложности могут возникнуть при добавлении карты на сайт

Серый прямоугольник вместо карты. Так бывает, когда у блока-контейнера не задана высота. Если вы вставляете схему через готовый код, пропишите параметр height. Если добавляете через конструктор сайта, укажите высоту в настройках HTML-блока. Например, в Tilda это делают в параметрах блока, а в WordPress — в свойствах элемента с кодом.

Карта выходит за границы страницы или обрезается. Такое происходит, когда в коде прописана фиксированная ширина и она больше встраиваемой области. Измените значение на width="100%". Тогда виджет будет подстраиваться под размер на странице и корректно отображаться на разных устройствах.

Карта исчезла. При переносе страниц, смене шаблона или обновлении сайта код виджета может удалиться или перестать работать. Скопируйте код заново из Яндекс Карт, Google Карт или 2ГИС и добавьте на сайт. Если устанавливали через конструктор, проверьте HTML-блок — он мог не сохраниться после правок.

Вместо карты появилось сообщение об ошибке. Так бывает с виджетами, подключёнными через API — когда перестал работать ключ доступа или закончился лимит запросов. Для решения проблемы проверьте статус ключа в кабинете разработчика того сервиса, через который подключали карту. Если срок его действия не истёк, но карта перестала работать, обратитесь в поддержку сервиса.

Снизилась скорость загрузки. Виджет подгружает дополнительные данные и увеличивает время открытия страницы, особенно если расположен в первом экране сайта. Включите отложенную загрузку через атрибут loading="lazy" в iframe-коде, чтобы карта подгружалась в момент открытия нужного блока.

Что запомнить про карты на сайте: три главных совета

• Упрощайте пользовательский путь. Благодаря карте на сайте человек видит расположение компании и строит маршрут сразу на странице. Ему не нужно переходить в отдельное приложение, искать адрес вручную и прокладывать путь. Чем меньше действий требуется до визита, тем выше вероятность, что человек доедет до компании.
• Учитывайте сценарий клиента при настройке карты. Чтобы показать адрес и построить маршрут, устанавливайте готовый виджет. Если нужно добавить несколько точек, обозначить вход или проложить путь до места, выбирайте конструктор. Для поиска филиалов, пунктов выдачи или объектов по параметрам подключайте API.
• Отслеживайте, как карта влияет на поведение посетителей. Сравнивайте показатель отказов и глубину просмотра до установки виджета и после. Для интернет-магазинов и сервисов с несколькими точками добавьте цели в аналитику: клики по карте, переходы к маршруту или нажатия на кнопку «Как проехать». Так вы поймёте, помогает ли карта доводить клиента до реального визита.

Как добавить карту на сайт: частые вопросы маркетологов

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

Откройте страницу сайта в редакторе и нажмите «Добавить новый блок». В категории «Другое» выберите T123 «HTML-код», вставьте в поле код карты и сохраните изменения. Проверьте, как она отображается на компьютере и смартфоне.

Как вставить карту на сайт WordPress?

Откройте нужную страницу в редакторе, нажмите кнопку «+» и выберите виджет «Пользовательский HTML». Вставьте в него код карты и сохраните изменения. Если используете визуальный редактор с готовыми блоками, добавьте элемент для HTML-кода и вставьте фрагмент туда.

Можно ли вставить Яндекс Карту без API-ключа?

Да. Для этого найдите нужную организацию в Яндекс Картах, скопируйте код в разделе «Поделиться» → «Виджет» и вставьте его на страницу сайта через HTML-блок.

Как поменять язык подписей на карте Яндекса?

В скопированном коде найдите параметр lang и замените значение на нужный параметр, например: ru_RU — русский, en_US — английский, tr_TR — турецкий или тот, что вам нужен.

Как разместить карту по центру страницы?

В конструкторе сайта выберите расположение элемента по центру. Если добавляете код вручную, поместите его в блок с выравниванием через CSS и задайте одинаковые отступы слева и справа.

Можно ли поставить две карты — Яндекс и 2ГИС?

Да, но такой вариант увеличит время загрузки страницы. Используйте две карты только в случаях, когда они решают разные задачи. Если функции дублируются, оставьте одну.