Как добавить карты на сайт — инструкция для разных CMS

На многих сайтах страницы с контактами содержат не только адреса и номера телефонов, но и интерактивные карты — в частности, от «Яндекса». Давайте разберемся, зачем вообще это делают, какие сложности могут возникнуть и как вставить «Яндекс.Карты» на сайт, созданный на CMS или конструкторе. 

Кому и зачем нужны карты на сайте

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

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

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

Поэтому сайты, на которых расположены карты, приносят больше продаж и больше посещений торговых точек. 

А еще карты нужны всем коммерческим сайтам. Дело в ранжировании в поисковых системах — наличие карты повышает шанс попасть в топ, хоть и ненамного. 

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

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

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

Некорректная работа «Яндекс.Карт». Это может произойти, если не использовать специальный ключ. Получить его можно в кабинете разработчика «Яндекса». Зайти в него могут все, у кого есть аккаунт на «Яндексе». 

Всплывающие окна из CMS. Если ваш сайт работает на CMS-системе, при добавлении кода карты на уже опубликованной странице могут возникать технические советы. Их можно просто удалить вручную. 

Отсутствие интерактивности. Захотели, чтобы пользователи могли увеличивать карту, двигать ее и смотреть другие объекты рядом — а получили просто картинку, которую можно скачать на телефон. Проблема может быть в том, что выбран неправильный тип карты. Их три: интерактивная, статическая, печатная. Удобнее всего интерактивная или статическая, на которых можно указать маршрут от ближайшей станции метро. 

Инструкция, как добавить «Яндекс.Карту» на сайт

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

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

Есть два способа сделать это: через HTML-код и плагин. Плагином проще: устанавливаете YaMaps, делаете ключ и вводите его в настройках. А потом добавляете карту в любом месте страницы. Вот видео, в котором пошагово показан процесс: 

YaMaps — Яндекс.Карты для WordPress — видеоинструкция

С кодом можно вставить карту так же просто. Есть два варианта: если организация зарегистрирована в Яндексе или не зарегистрирована. 

Если компания есть в «Яндекс.Справочнике», она есть и на «Яндекс.Картах». Просто откройте карту и найдите свою компанию, используя поисковую строку. Установите курсор на нее, нажмите три точки в верхнем левом углу и выберите «Поделиться», а затем скопируйте HTML-код. 

Также можно копировать код в личном кабинете «Яндекс.Справочника», в разделе «Карта на сайт». 

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

Если захотите, можете использовать дополнительные инструменты — например, «Линии». Ими можно отметить путь до вашей компании от ближайшей станции метро или другого объекта. Также на карту можно добавить многоугольники и другие метки. 

Закончите оформление — нажмите «Сохранить и продолжить» в левом нижнем углу экрана. Растягиваете выделенную область — она будет показана на сайте — и выбираете тип карты. Если нужна интерактивность, интерактивную, если просто метка — статическую. Если поставить галочку на «Растянуть по ширине», карта займет всю ширину блока на сайте — нельзя будет добавить текст сбоку. 

Потом жмете на «Получить код карты» и копируете его. 

Вставлять полученный HTML-код нужно на сайте. Заходите в административную панель, переходите на страницу контактов и выбираете режим отображения «Редактор кода». 

Вставляете код на то место, где должна быть карта. Важно не разбивать уже существующий код, а вставлять HTML с новой строки. Сохраняете изменения и смотрите, корректно ли отображается карта. 

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

Вот инструкция от WIX. Если коротко, подобный функционал уже предусмотрен в конструкторе. Чтобы добавить карту на сайт, нужно: 

1. Добавить отдельный блок на страницу или новую страницу, если хотите, чтобы карту показывали отдельно. 
2. Нажать на «Контакты» и установить отметку рядом с «Карта». 
3. Нажать на «Редактировать» и указать адрес вашей компании — тогда метка автоматически встанет на него. 

Сохраняете изменения, проверяете работоспособность карты — и все. 

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

Сайты на чистом HTML уже почти не делают. Но если у вас такой, то сначала создайте карту в «Конструкторе» или скопируйте код с личного кабинета «Справочника». А потом просто вставьте код в нужное место страницы, как в случае с добавлением на WordPress. 

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

Создаете карту в «Конструкторе» или копируете уже готовый код и идете в конструктор сайта от Bitrix24. Заходите на нужную вам страницу и добавляете блок. В списке стандартных блоков выберите HTML и введите в появившемся окне скопированный код. 

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

Можно добавить карту и как виджет, но только Google Maps. Вот инструкция от Bitrix24, как работать с картами от Google. 

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

Tilda работает и с «Яндекс.Картами», и с Google Maps. Вот пошаговая инструкция по добавлению карты. Если коротко, то:

1. Добавляете блок T143 из категории «Другое» или блоки CN401, CN402, CN402A, CN403, CN404 из категории «Контакты». 
2. В редактировании меняете масштаб, добавляете отметки с помощью адреса. 
3. Сохраняете изменения и проверяете, как все работает. 

Подробно процесс показан в отдельном видео:

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

В других CMS и на конструкторах сайтов процесс схож — можно или установить плагин, или работать с HTML-кодом, или использовать специальные виджеты. 

А вы хоть раз использовали карты на сайтах сами? Поделитесь мнением в комментариях!