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

Согласитесь, что наличие такой карты на самом сайте значительно ускоряет процесс изучения схемы проезда. В противном случае, когда она отсутствует, приходится использовать сторонние сервисы (например, приложение 2GIS).

А есть ли или планируется подобная схема на вашем веб-сайте? Если ваша деятельность связана с продажей товаров или оказанием услуг по конкретному адресу, то желательно в контактной информации не только указать его текстом, но и показать наглядно.

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

Преимущества интерактива

Интерактивная карта для сайта позволяет не просто просматривать схему местности, но и управлять ею:

  • изменять масштаб,
  • передвигаться по ней в любом направлении (хоть по всей России и миру),
  • видеть информацию о различных объектах (заправки, парковки, магазины и т.д.).

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

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

Статическая схема не даёт таких возможностей, так как не позволяет выйти за свои границы.

Как создать интерактивную карту?

Если вы думаете, что для создания интерактивной карты вам нужно будет изучать HTML или PHP, то вы ошибаетесь. Благодаря специальным сервисам, этот процесс настолько упростился, что стал под силу любому пользователю Интернета. Попробуйте сами!

Есть два сервиса, которых вам хватит за глаза для создания красивой и удобной интерактивной схемы для своего сайта на WordPress, Joomla или иной системе управления – это Яндекс и Google карты. Использовать что-то стороннее я не вижу смысла, так как Яндекс и Google предоставляют все необходимые инструменты.

Яндекс

Для создания интерактивной схемы от Яндекса вам потребуется перейти в сервис «Конструктор карт». Выглядит он следующим образом (на момент прочтения статьи внешний вид может поменяться, так как Яндекс часто обновляет интерфейсы своих сервисов):

Введите искомый адрес в поисковой строке (сервис будет давать подсказки в виде выпадающего списка) и нажмите кнопку «Найти».

Как видите, нужная точка добавилась. Теперь вам нужно привести карту к тому виду, в каком она будет отображаться на сайте. Сейчас масштаб достаточно мелкий, поэтому целесообразно его увеличить — до такого вида, когда уже видно здание. Далее нажмите кнопку «Сохранить и продолжить».

После этого выберите «Интерактивная», введите размеры в пикселях (можно указать «растянуть по ширине» — тогда карта будет автоматически подстраиваться под ширину веб-страницы) и нажмите «Получить код».

Сервис сгенерирует вам два вида кода – JavaScript и iframe. Вам останется лишь выбрать нужный, скопировать его и вставить в то место на вашем сайте, где вы хотите видеть карту. Рекомендую в большинстве случаев выбирать JavaScript код, так как iframe имеет некоторые ограничения и не всегда удобен.

Небольшое пояснение по вставке кода на сайты с CMS. Если вы хотите установить схему на страницу «Контакты», откройте эту страницу для редактирования, перейдите в режим HTML и в нужном месте, например, в самом конце, вставьте JavaScript код. Сохраните изменения и любуйтесь результатом.

Google

Создание и установка интерактивной карты от Гугла происходит аналогичным образом.

Перейдите на сервис «Google Карты» и в поиске введите требуемый адрес.

Удобство здесь в том, что Google сразу масштабирует карту до того размера, когда видно здание. Если метка указана верно, то далее нажмите на кнопку «Поделиться».

В открывшемся окне перейдите на вкладку «Код», выберите предустановленный размер (или задайте произвольный) и скопируйте сгенерированный код (Гугл предлагает только iframe).

Этот код вы можете разместить в любом месте на вашем сайте.

Какой сервис лучше?

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

К примеру, на карте Яндекса можно линиями нарисовать схему проезда. В Google такая возможность отсутствует.

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

Пользуетесь другим сервисом по созданию интерактивной карты? Расскажите о нём в комментариях. Думаю, другим читателям будет интересно.

Остались вопросы? Готов на них ответить.

С уважением, Сергей Чесноков