Приветствую вас, друзья! Заходя в раздел «Контакты» на сайтах различных компаний, часто хочется не только прочитать адрес, но и посмотреть, где эта компания располагается на карте. Наглядное изображение помогает спланировать пути проезда, прикинуть расстояние до места назначения, посмотреть наличие парковки (актуально для автовладельцев).
Согласитесь, что наличие такой карты на самом сайте значительно ускоряет процесс изучения схемы проезда. В противном случае, когда она отсутствует, приходится использовать сторонние сервисы (например, приложение 2GIS).
А есть ли или планируется подобная схема на вашем веб-сайте? Если ваша деятельность связана с продажей товаров или оказанием услуг по конкретному адресу, то желательно в контактной информации не только указать его текстом, но и показать наглядно.
Для этих целей лучше всего воспользоваться интерактивной картой, которую вы без проблем можете создать самостоятельно. В данной статье я расскажу вам о том, как это сделать.
Преимущества интерактива
Интерактивная карта для сайта позволяет не просто просматривать схему местности, но и управлять ею:
- изменять масштаб,
- передвигаться по ней в любом направлении (хоть по всей России и миру),
- видеть информацию о различных объектах (заправки, парковки, магазины и т.д.).
Думаю, не нужно рассказывать вам о том, что такая визуализация создаёт дополнительные удобства для пользователя. Он может:
- составить план проезда до пункта назначения из любой другой точки;
- путём масштабирования понять, в каком районе и как далеко от него находится фирма;
- посмотреть ближайшие ориентиры.
Статическая схема не даёт таких возможностей, так как не позволяет выйти за свои границы.
Как создать интерактивную карту?
Если вы думаете, что для создания интерактивной карты вам нужно будет изучать HTML или PHP, то вы ошибаетесь. Благодаря специальным сервисам, этот процесс настолько упростился, что стал под силу любому пользователю Интернета. Попробуйте сами!
Есть два сервиса, которых вам за глаза хватит для создания красивой и удобной интерактивной схемы для своего сайта на WordPress, Joomla или иной системе управления – это Конструктор карт Яндекса и Google My Maps. Использовать что-то стороннее я не вижу смысла, так как Яндекс и Google предоставляют все необходимые инструменты.
Яндекс
Для создания интерактивной схемы от Яндекса вам потребуется перейти в сервис «Конструктор карт». Для пользования сервисом нужно залогиниться под аккаунтом Яндекса. После входа нажмите на кнопку «Создать карту».
Введите искомый адрес в поисковой строке (сервис будет давать подсказки в виде выпадающего списка) и нажмите кнопку «Найти».
После добавления нужной точки вам нужно привести карту к тому виду, в каком она будет отображаться на сайте. Поначалу масштаб достаточно мелкий, поэтому целесообразно его увеличить — до такого вида, когда уже видно здание.
Введите название созданной карты (его будете видеть только вы), при желании добавьте подпись метки (она будет отображаться на создаваемой карте), настройте внешний вид метки, после чего нажмите «Сохранить и продолжить».
После этого выберите «Интерактивная», введите размеры в пикселях (можно указать «растянуть по ширине» — тогда карта будет автоматически подстраиваться под ширину веб-страницы) и нажмите «Получить код».
Сервис сгенерирует вам два вида кода – JavaScript и iframe. Вам останется лишь выбрать нужный, скопировать его и вставить в то место на вашем сайте, где вы хотите видеть карту. Рекомендую в большинстве случаев выбирать JavaScript код, так как iframe имеет некоторые ограничения и не всегда удобен.
Создание и установка интерактивной карты от Гугла происходит аналогичным образом.
Перейдите на сервис Google My Maps (предварительно залогинившись в аккаунте Google) и в строке поиска введите требуемый адрес.
Удобство здесь в том, что Google сразу масштабирует карту до того размера, когда видно здание. Если метка указана верно, то далее нажмите на кнопку «Поделиться».
В открывшемся окне перейдите на вкладку «Встраивание карт», выберите предустановленный размер (или задайте произвольный) и скопируйте сгенерированный код (Гугл предлагает только iframe).
Этот код вы можете разместить в любом месте на вашем сайте.
Какой сервис лучше?
Каким из двух сервисов пользоваться – решать только вам. Они различаются прежде всего внешним видом, а также наличием или отсутствием дополнительных функций.
Друзья, создавайте интерактивные схемы, устанавливайте их на свои сайты, повышая тем самым поведенческие факторы и упрощая пользователям процесс взаимодействия с вами (в этом вам также может помочь кнопка онлайн-консультанта). Надеюсь, инструкция, изложенная в данной статье, была понятной и полезной для вас.
Пользуетесь другим сервисом по созданию интерактивной карты? Расскажите о нём в комментариях. Думаю, другим читателям будет интересно.
