Как сделать схему проезда

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

Яндекс.Карты – это картографический сервис, который можно использовать с целью поиска конкретных объектов и для получения информации о них. Любой владелец организации может зарегистрироваться в Яндекс.Справочнике и указать на Яндекс.Карте место расположения своей компании или офиса. Конструктор карт Яндекс — сервис с помощью которого можно сделать схему проезда или список магазинов для встраивания на свой сайт.

На Яндекс.Картах любой ваш клиент может затем найти вашу организацию и проложить маршрут к ней со своего текущего местоположения.

Рекомендуем: Click.ru – сервис контекстной рекламы для профессионалов

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

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

Зачем нужна карта Яндекс на сайте

Ранее мы уже писали о факторах , которые учитывает Яндекс при ранжировании коммерческих сайтов. Один из них – это полный адрес, в том числе карта (желательно интерактивная) на странице с контактами.

Но это только одна из причин, почему вам необходима карта на веб-ресурсе.

Она нужна и для других целей:

• Чтобы показать клиенту, где вы находитесь, в каком районе города. Многим как раз проще ориентироваться по карте, а не по адресу.
• С помощью карты клиент сможет проложить схему проезда или маршрут, как добраться со своего текущего местоположения к вам в магазин, кафе или офис. При этом, если на сайте интерактивная карта, ему не нужно будет покидать ваш сайт.
• Если у вас несколько точек продаж или офисов, на карте вы сможете указать их все. Клиент выберет, куда ему добираться ближе, удобнее и быстрее.

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

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

Чтобы встроить карту Яндекса, нужно:

• Создать карту в конструкторе;
• Получить код карты;
• Вставить код на сайт (он подходит для сайтов на любой CMS).

Для создания карт есть специальный сервис – Конструктор карт Яндекс .

Если у вас есть почта на Яндексе, вы можете перейти на сервис и сразу приступать к созданию карты. Нажмите кнопку «Создать карту».

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

Давайте попробуем создать карту. Рассмотрим пример: ваш офис находится в 10 минутах ходьбы от метро. Вы хотите указать на карте маршрут от метро до своего офиса.

Первым делом называем и задаем описание своей карты (не обязательно; но так будет удобнее, особенно если карт будет несколько).

Затем приступаете к редактированию карты. На карте вы можете:

• Ставить метки;
• Рисовать линии и многоугольники;
• Указать информацию о пробках (подтягивается автоматически, об этом позаботится сам Яндекс);
• Создавать слои.

Как нарисовать схему проезда на Яндекс.Картах

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

Затем предлагаю поставить еще и метку, указывающую на офис. Выбираем инструмент «Метки», и ставим метку, просто кликнув мышкой в нужном месте. Затем настраиваем метку: пишем описание, выбираем цвет и тип.

Нажимаем «Сохранить и продолжить».

Дальше указываем тип карты:

• Интерактивная – можно увеличить, уменьшить, полноценно взаимодействовать с картой;
• Статичная – будет на сайте в виде простой картинки. Подойдет в том случае, если вы знаете, что у вашей ЦА в основном медленное соединение.

Лучше, конечно же, использовать интерактивную карту.

Яндекс.Карта с несколькими точками

Давайте попробуем создать карту для того случая, если у вас два магазина или два офиса в одном районе.

Точно так же создаем новую карту, называем и пишем описание. Затем выбираем инструмент «Метки». Ставим метку в нужном месте и настраиваем.

Это будет указание на первый офис (магазин, салон, филиал). Теперь нужно указать еще и второй. Все делаем точно так же, только я выбираю другой цвет для этой метки – чтобы различать. Пусть будет зеленая.

Все, карта готова. Можно сохранять и вставлять на сайт. Даже если вы не можете по какой-то причине это сделать сейчас, вы всегда найдете готовые карты в списке карт:

Как установить на сайт или на страницу контакты

Как я уже писала выше, после создания карты нужно скопировать код и встроить его на сайт.

После того, как создали карту, нажимаем «Получить код карты». Вы увидите кусочек кода, который нужно встроить в сайт.

Обычно карту на сайте размещают:

• На странице «Контакты»;
• В подвале (футере) сайта;
• Реже – на главной странице или странице «Доставка и оплата» (в основном, если речь идет о самовывозе).

Имея готовый код карты, вставить ее на сайт просто. Я подскажу вам несколько способов, в первую очередь для владельцев сайта на WordPress. Настройки вы сможете произвести даже самостоятельно.

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

Рассмотрим, как вставить карту на сайте WordPress на страницу «Контакты». У нас на этой странице уже написан наш адрес, телефон, а внизу под всем контентом будет размещаться карта.

Заходим в административную панель сайта. Переходим в раздел «Страницы»:

Затем находим там нашу страницу «Контакты» и выбираем «Изменить». Переключаем редактор из режима «Визуальный» в «Текст». В конструкторе карт выбираем код iframe и копируем его:

В самом низу, после текста, вставляем этот код и обновляем страницу.

Вот теперь наша карта на сайте:

Отредактировать ширину и высоту можно прямо в коде, который дал Яндекс (теги width, height – задаем нужное числовое значение в кавычках).

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

На WordPress отредактировать футер можно через админпанель. Зайдите Внешний вид – Редактор – Подвал:

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

Плагины Яндекс.Карт

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

• Для 1С Битрикс: «Ваша сеть офисов на карте» и «Яндекс.Карта объектов инфоблока»;
• Для Drupal: «Geofield Yandex Maps»;
• Для WordPress: «Yandex Maps API»;
• Для Joomla!: «Яндекс.Карты для Joomla» и другие.

Полный список плагинов вы можете посмотреть в Справке Яндекса.

Как видите, сделать и встроить карту Яндекс на сайт не так и сложно, и с базовым знанием HTML это вполне можно сделать самостоятельно.

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

Создаем и вставляем карту проезда на сайт через онлайн конструктор Яндекс.Карт

Перед магазинами, кто имеет свой собственный физический магазин, офис, или пункт самовывоза, периодически встает вопрос о добавлении карты проезда для удобства своих клиентов. Разные магазины подходят к этому вопросу по-разному. Кому-то нравятся статические нарисованные карты профессиональными веб-дизайнерами, а кому-то нравятся карты интерактивные, которые можно «передвинуть» или изменить масштаб. Уверен, что вы видели подобные карты на сайтах интернет-магазинов, в разделе контакты. Небольшие магазины пользуются конструкторами карт, и чаще всего от компании Яндекс. Игроки помасштабнее, пользуются как рисованными картами, так и конструкторами. Например, на сайте гипермаркета Юлмарт, в разделе «Адреса и контакты» можно увидеть сразу два типа карт. В этой статье поговорим о том, как создать и вставить карту Яндекса на свой сайт.

Вообще, конструктор Яндекс.Карт является всего небольшой частью API Яндекс.Карт. И предназначен для обычных пользователей, в то время, как API является более мощным инструментом, но требующим знания программирования (в частности языка JavaScript). Т.к. рядовой пользователь не знаком с этим языком, то мы рассмотрим, как создать интерактивную карту с помощью его «младшего брата» – конструктора.

Прежде чем приступать, должен вас предупредить, что для этого вам понадобится аккаунт на Яндексе, т.к. все карты будут привязываться к нему. Советую завести корпоративный аккаунт, если вы не единственный собственник бизнеса.

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

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

Основные инструменты работы с конструктором, вы увидите на карте в самом верху. С помощью поиска по адресу или в ручном режиме, двигая карту и увеличивая масштаб, находим свой адрес. Давайте допустим, что ваша компания находится по адресу «Багратионовский проезд д. 1с2». Для этого нажимаем на кнопку «Метки» в инструментах, и устанавливаем метку на карте. Вы можете выбрать цвет метки и тип метки. А также указать для нее номер, но это доступно только для второго типа (круглая, с пустотой внутри).

Помимо этого, у вас есть большое поле, куда вы можете написать произвольный текс о вашей компании, который будет отображаться при клике на метку. Это описание поддерживает HTML теги, т.е. возможно сделать текст жирным, другого цвета или вообще вставить фотографию магазина. Я, для примера, сделал логотип компании, название компании, краткое описание, время работы и адрес.

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

А также уже встречающееся в метках описание. В нем можно указать свой комментарий или указать номера автобусов, на которых можно до вас добраться. Я указал время ходьбы от метро.

Все, по сути наша карта готова. Можно задать какой слой карты показывать – «Схема», «Спутник», «Гибрид» и т.д., но обычно используется классическая «Схема». Можно указать отображать ли пробки на карте. Слои и пробки, клиент сам сможет поменять на интерактивной карте, поэтому тут вы указываете, в каком состоянии будет карта «по умолчанию».

Остается только нажать «Сохранить карту и получить ссылку», слева от карты, и конструктор предложит в каком виде ее нужно сохранить – «Интерактивная карта», «Статическая карта» или «Карта для печати». Попросит задать размер карты в пикселях.

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

Мой код интерактивной карты получился вот таким:

Креативная схема проезда – повышаем привлекательность сайта, буклета, каталога

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

С чего все начиналось:

Но это были лишь карты-схемы, они представляли определенную местность с указанием здания офиса и основных ориентиров – дорог, метро, автобусных остановок и т.п. Это было упрощенное изображение, которое содержало минимальную информацию для ориентирования. При использовании интерактивных карт Яндекса и Гугла можно было работать с масштабом, прокладывать маршрут. Но визуальная ценность данного типа информации была очень низкой.

Следующим этапом можно назвать отрисованные карты проезда, которые, зачастую, еще более запутывали посетителя.

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

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

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

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

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

Сегодня можно с уверенностью говорить о новом тренде для сайтов – создании анимированной карты проезда. Об этом читайте в статье «Актуальный тренд в дизайне сайтов: анимированная карта-схема проезда».

Если вам нужны креативные привлекательные схемы проезда, обращайтесь!

Агентство Triza-Media принимает заказы на разработку карт проездов для сайтов и печатных материалов.

Источники:

https://postium.ru/konstruktor-kart-yandeks-kak-sdelat-kartu-i-vstavit-na-sajt/
https://sa1nikov.ru/online-konstruktor-yandex-map/
https://triza-media.ru/blog/dizayn/360/