Как нарисовать схему проезда на карте яндекс
Перейти к содержимому

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

  • автор:

Создать карту проезда для сайта в конструкторе Яндекс

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

вставка яндекс карты на сайт

Итак, чтобы создать свою карту в Яндексе убеждаемся, что у вас есть активный аккаунт в Яндексе и идем сюда https://yandex.ru/map-constructor/

Видим что-то подобное:

  1. Кликаем на «Создать карту».
  2. Создаем новую карту для сайта, вводим адрес и выбираем из найденных Яндексом адресов подходящий.Можно дать свою подпись метки (она будет видна на карте) и название для карты (оно будет видно при клике). Можно поменять цвет иконки.
  3. Назовем как-нибудь карту (это для администратора).
  4. Выбираем размер схемы проезда для вставки на сайт.
    В слишком мелкой карте проезда неудобно будет разбираться, а слишком большая займет много места. Я обычно выбираю от 500 до 600 пикселей по высоте и 100% по ширине для адаптивности. Можно задать и произвольный размер просто перетягивая ползунки на схеме проезда.
  5. Копируем код JavaScript.
    И идём на сайт, куда нужно встроить полученный код карты Яндекс.Переходим в режим исходного кода в редакторе (любой редактор в любой CMS его поддерживает) и в нужное место вставляем код карты Яндекс для сайта.Заодно меняем в конце параметр «true» на «false» — это чтобы при скроллинге страницы вниз карта Яндекса на масштабировалась, наверняка вас это раздражало на каком-то другом сайте.

Читайте также: Лучший плагин для всплывающих окон в WordPress

Сохраняем и смотрим изменения. Карта Яндекса с адресом организации успешно добавлена в контакты на сайте.

Рисуем схему проезда на карте Яндекса

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

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

схема проезда яндекс на сайт

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

При желании можно нарисовать не только линию, но и какой-то объект. Выбираем «Многоугольник» и рисуем произвольную фигуру.

Если тыкнули не туда – не страшно, просто удалите точку. Также можно сделать границу контура другим цветом.

Сохраняем. И обновляем страницу с добавленной картой проезда на сайте. Все изменения тут же отразятся на ней.

Посмотрите, как я делаю схему проезда на карте Яндекса для сайта на видео.

Советы и рекомендации

  • Тщательно выбираем масштаб (именно он будет виден в карте по умолчанию, если масштаб будет слишком мелким – то клиент не увидит здания и не поймет куда заходить, а если слишком крупный – то наоборот, будут одни здания, но человек не сориентируется в местности и в любой случае ему придется скроллить. Для застроенного города обычно лучше подойдет крупный масштаб, для объекта за городом – мелкий.
  • Расположите ваш объект точно в центре карты. Иначе при масштабировании он будет смещаться и его придется «ловить» по всей карте.
  • Рекомендую, чтобы в карте проезда для города были видны названия соседних больших улиц или проспектов, а не только ваш «бетонный проезд», по знакомым улицам будет проще всего сориентироваться.
  • Для загородных объектов также важно, чтобы «в кадр» попали какие-то ключевые ориентиры – граница МКАД, главные автотрассы и т.п.
  • Убедитесь, что карта не масштабируется при скроллинге страницы вниз или вверх, это реально бесит

Читайте также: Как подключить онлайн платежи на сайте

Примеры карт Яндекса

Посмотрите не самый удачный реальный пример карты на сайте, который я случайно увидел, когда готовил статью:

карта на сайте примеры

Никаких ориентиров, масштаб слишком крупный — это ж за городом находится, нет схемы проезда и подписей. Сама карта слишком мелкая и находится в сайдбаре, что там разглядишь-то на 300 точек?

А вот уже получше:

Несмотря на то, что сам объект находится сбоку, отлично показана схема проезда до него, клиент сразу сориентируется, откуда нужно съезжать и куда заезжать.

Также вполне подойдет такой пример для размещения карты на сайт:

карты яндекс примеры

На нем изначально виден регион, где располагается склад (мол, где-то на юге от МКАД) и видно что недалеко. Пару уточняющих приближений и станет понятно где сворачивать и куда ехать.

Конструктор карт Яндекс для сайта — штука простая, понятная и удобная.

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

Встроить карту на сайт за денежку!

Лениво возиться, нет времени и желания? Вам с удовольствием сделают эту работу всего за 500₽ на — вот прямая ссылка на исполнителей.

  • Создание сайта компании
  • Создание магазина

Полезные цитаты: Сегодня я богат именно благодаря тому, что я сделал в свободное время (Р.Кийосаки)

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

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

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

Реклама: Erid 2VtzqxMEZ7c

Реклама. Erid 2VtzquiXA8E

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

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

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

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

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

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

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

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

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

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

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

Конструктор карт

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

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

Создаём новую карту

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

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

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

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

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

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

Схема проезда на сайт

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

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

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

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

Тип карты: интерактивная и статичная

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

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

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

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

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

Добавляем офисы и филиалы

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

Список карт

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Контент. Схема проезда со ссылкой на Яндекс.Карты

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

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

Создание карты. Шаг 1

Перейдите на сервис Яндекс.Карты.

Создание карты. Шаг 2

Найдите на карте необходимое вам здание, используя строку поиска или перемещаясь по карте.

Создание карты. Шаг 3

На необходимое здание поставьте метку.

Создание карты. Шаг 3а

Нажмите кнопку «Добавить метку».

Создание карты. Шаг 3б

Щелкните по зданию.

Создание карты. Шаг 3в

В появившемся окошке заполните разделы «Название» и «Описание» и нажмите кнопку «Ок».

Точно так же, как описано в шаге 3а-3в, вы можете создать метки на ближайшие станции метро, остановки общественного транспорта и т.п.

Создание карты. Шаг 3г

В окне «Создание карты» (находится слева от карты), заполните разделы «Название карты» и «Описание карты» и нажмите кнопку «Сохранить».

Вставка схемы на сайт. Шаг 4

Скопируйте в буфер обмена изображение карты с меткой (кнопка PrtScn на клавиатуре).

Вставка схемы на сайт. Шаг 5

Вставьте в любой графический редактор и обрежьте лишние элементы.

Вставка схемы на сайт. Шаг 6

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

Установка ссылки на Яндекс.Карты. Шаг 7

Вернитесь на Яндекс.Карты к созданной карте и получите ссылку на нее.

Установка ссылки на Яндекс.Карты. Шаг 8

Скопируйте ссылку на карту в буфер обмена (Ctrl+C).

Установка ссылки на Яндекс.Карты. Шаг 9

В режиме редактирования страницы кликните на карту (она выделится маленькими квадратиками по углам изображения).

Кроме того, ссылку на точку в карте можно оформить и с текста.

Установка ссылки на Яндекс.Карты. Шаг 10

Установка ссылки на Яндекс.Карты. Шаг 11

Вставьте скопированную ранее ссылку в соответствующую строку и нажмите «Добавить ссылку».

Установка ссылки на Яндекс.Карты. Шаг 12

Подтвердите изменения, нажав кнопку «Сохранить».

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

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

Конструктор карт Яндекса – еще один способ создать интерактивную карту

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

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

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

Как создать карту

Чтобы создать интерактивную карту, зайдите в конструктор (понадобится яндекс-почта), кликните на надпись «Создать карту» и добавьте объекты: метки, линии и многоугольники. Есть возможности кастомизации: меняйте тип и цвет объектов или дайте им название.

Линией вы можете показать маршруты, а многоугольниками — зоны, дома и другие площадные объекты. Можно менять цвет и прозрачность фигуры, изменять ее форму и перемещать ее в любую сторону с помощью мыши. В полигоне легко сделать внутренний контур, то есть дырку.

В конструктор можно добавить объекты из файлов KML, GPX, GeoJSON, CSV, XLSX. И наоборот, если вы поставили нужные точки в конструкторе, можно экспортировать их для использование в других программах.

Публикуем карту на сайте

Когда карта готова, нажимаем «Сохранить и продолжить». В появившемся окне нужно выбрать область отображения карты и формат.

  • Интерактивная карта – пользователи могут взаимодействовать с элементами карты: передвигать ее, менять масштаб, кликать на объекты и читать их описание.
  • Статическая карта – картинка в формате PNG для вашего сайта.
  • Печатная карта – выводит изображение в высоком разрешении для печати.

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

Еще больше информации – в справке по конструктору от Яндекса.

Материал подготовила Юлия Федорова

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *