Как сделать схему проезда в Яндекс картах?
Конструктор карт от Яндекс – как вставить интерактивную карту на сайт?
Приветствую вас, друзья и коллеги. Недавно я рассказывал про банковские карты Яндекс Денег (хорошая штука), сегодня речь снова пойдет о сервисе от Яндекса и снова про карты, только не про пластиковые и не про игральные, а про карты местности.
Возможность помочь клиентам добраться в нужное место – это весомый вклад в развитие бизнеса, чем больше людей дойдет куда надо, тем выше будут доходы и прибыль. Так что, если ваш бизнес как-то привязан к объектам на местности, то вставить хорошую карту на сайт надо обязательно.
Зачем нужна интерактивная карта
- Удобно для клиента – легко планируется маршрут с учетом всех актуальных изменений, так как Яндекс оперативно вносит данные о ремонтах и новых застройках на свои карты.
- Удобно владельцу сайта – все корректировки вносятся на карту автоматически, достаточно один раз вставить карту на сайт, потом обновления подгружаются из базы Яндекса сами.
- Поднимает авторитет и уровень доверия к организации. Хотя такую примочку может сделать любая шараж-монтаж контора, на подсознательном уровне сайт с интерактивной картой воспринимается лучше.
В былые времена адреса офисов, маршруты прохода и проезда, различные интересные объекты и т.д. отмечали на картинках, изображающих карту, и выкладывали на сайт обычным jpg или png файлом. Проблема была в том, что они не могли учесть временные ремонты, пробки или другие изменения местности, не имели возможности подсказать индивидуальных маршрут с разных направлений.
С развитием интернет сервисов, таких как Яндекс Карты и Google Maps, появилась возможность сделать карты живыми – интерактивными. Такие можно вертеть в разные стороны, менять масштаб, маршруты с разных точек задавать, планировать свое перемещение с учетом пробок и многое другое.
Наличие удобной схемы проезда на странице контактов в наше время является правилом хорошего тона для любой компании.
И для того, чтобы помочь вам сделать свой веб ресурс более приветливым к людям я расскажу, как добавить Яндекс карту на сайт, делается это очень легко с помощью специального конструктора (не сложнее чем вставка видео с Youtube).
Конструктор карт Яндекс
Если у вас нет аккаунта в Яндексе, то надо будет его завести, так как без этого сконструировать ничего не получится, сервис попросит вас залогиниться или пройти регистрацию. Пугаться не нужно, регистрация – это создание почтового ящика на Yandex. Даже если он вам не нужен для работы с электронной почтой, пригодится для других сервисов поисковика, например, для Яндекс Метрики или Яндекс Вебмастер.
Начинается процедура с этой странички – tech.yandex.ru/maps/tools/constructor/
Так как вы читаете эту статью, значит, вы входите первый раз и сохраненных ранее карт у вас нет, остается выбрать левую желтую кнопку “Создать новую карту”. С этого момента начинается формирование индивидуальных настроек карты на нужной местности.
Фишка в том, что вы сможете вставить не просто Яндекс карту с точным адресом, а карту с любым количеством объектов выделенных разными маркерами и цветами – объектами, точками, маршрутами.
Все настройки производятся в визуальном конструкторе, никакие коды править не придется, работа по адаптации мало отличается от обычного использования Яндекс карт пользователем. Начнем с добавления объектов.
Добавление объектов
Первым инструментом послужит форма поиска, которая находится в верхней части карты. С ее помощью мы можем отыскать нужную точку по адресу, координатам или названию. Вводим в поле данные запроса, пример с адресом «Москва, Красная площадь»:
После нажатия на кнопку найти на местности появится точка, соответствующая расположению заданного объекта. Вставить можно много объектов. Пример с Кремлем:
Каждую точку можно настроить так, чтобы она отличалась от других объектов и была на карте легко различима – меняется цвет и форма, а также, внутри можно добавить уникальный значок, если ткнуть в выпадающее меню «Контент». Это удобно, если объектов на создаваемой карте много и их можно классифицировать по разным группам.
Слева наполняется список всех отмеченных на карте адресов.
Изменение масштаба и положения
С помощью клавиш «+» и «-», находящихся в левой верхней части макета устанавливается оптимальный масштаб. Полная карта России не нужна, чтобы перемещаться по центру Москвы и, если вы указываете точечный объект в каком-то городе, лучше настроить масштаб на уровне, когда различимы названия улиц и окружающих домов.
Для перемещения карты в разные стороны нужно захватить ее нажатием левой кнопки мыши и двигать куда нужно.
Контуры объектов (многоугольники) и линии
При необходимости выделить очертания какого-либо элемента на карты, когда указания точкой недостаточно, используем инструмент «Многоугольники». Устанавливая одну точку за другой, мы получаем периметр, залитый внутри определенным цветом.
Точек может быть сколько угодно, поэтому, фигура, закрашенная на карте, допускает любую степень сложности. Завершить построение контура можно кликом мыши по последней установленной точке или переключением на любую другую кнопку конструктора (например, на линии). Я выделил контуры Московского Кремля по его стене:
Начертание линий осуществляется кнопкой «Линии». Все действия аналогичны предыдущему инструменту, только пространство между точками не закрашивается. С помощью линий на Яндекс карте можно рисовать маршруты движения (прохода, проезда).
Таким способом можно показать оптимальный маршрут осмотра достопримечательностей.
Конечную точку подтверждаем повторным ее нажатием мышью, там будет меню «Удалить»/«Завершить». После выбора завершения открывается поле для подписи к конечной точке и настройки параметров линии (толщина, цвет, прозрачность).
Завершаем маршрут нажатием на «Готово».
Вид карты и наложение пробок
Последний штрих, который позволяет придать карте особые свойства – это наложение пробок, для этого есть отдельная кнопка. Честно сказать, я сомневаюсь, что подобная опция будет часто востребована для карт, вставляемых на сайт, так как для движения на машине люди чаще пользуются навигаторами, чем встроенными картами.
А вот переключение режимов между схемой, спутником и гибридом может пригодиться.
Вид со спутника придает окружающим объектам их реальный облик и узнать их на такой карте проще, чем схематичные прямоугольники схемы.
Название и описание
Для того, чтобы в будущем мы могли возвращаться к созданной карте для ее корректировки или для повторного получения кода вставки надо придумать ей название и описание, после чего сохранить.
Код карты для вставки на сайт
Наша карта уже готова и теперь надо получить ее код для вставки на сайт, Яндекс дает возможность сделать:
- интерактивную карту (о которой я говорил с самого начала);
- статическую – обычная картинка, только с мудреным кодом, ничего двигать в ней нельзя, в добавок еще и максимальное число объектов ограничено;
- печатную – файл-изображение высокого качества, поддерживаются не все страны, в основном СНГ и Турция, не поддерживаются спутниковая и гибридная версия.
Выбор между ними будет выведен сразу после сохранения.
В этом же меню задается итоговый размер в пикселях. Задать его можно вручную или двигая за уголки рамку вокруг выделенной области справа. Галочка «Растянуть по ширине» заставляет карту занимать все пространство на сайте упираясь в края того блока, где она выводится.
На этом этапе есть возможность вернуться к редактированию карты, в левой верхней части окна есть соответствующая надпись со стрелкой.
Итоговый код появляется после нажатия на кнопку «Получить код карты», мой выглядит вот так:
При выборе печатной карты добавится выбор формата файла – png или jpg, и кода, соответственно, не будет – кнопка скачивания вместо него появится. Такой файл тоже можно вставить на сайт, только надо будет закачивать его на хостинг и, при отсутствии визуального редактора у вашего сайта, надо будет выписать изображение в HTML теги (src)
Как вставить карту Яндекс на сайт
Код мы получили, теперь необходимо перенести его на наш веб ресурс. Для размещения подойдет любое место, главное, чтобы размеры вписывались. Если вы пользуетесь конструкторами или визуальными редакторами, то не забудьте при вставке кода переключить их в текстовых (HTML) режим. Вот так:
Карта, которую я сделал
Вот что получилось у меня после всех проведенных настроек:
Удобен сей элемент всем – и объекты нужные подсвечены и масштаб подобран как положено. Кроме того, сервис Яндекса позволяет пользователю определить свое местоположение (стрелочка в верхнем левом углу) и проложить индивидуальный маршрут в нужную точку.
Раскрыть карту на весь экран позволяет кнопка в правом верхнем углу в виде двух расходящихся в разные стороны стрелок. Теперь про плагины.
Плагины для WordPress и других CMS
Раньше делать карты было сложнее и многие пользовались для этих целей специальными плагинами, например, для WordPress был такой – Yandex Maps for WordPress. Сейчас не нужны никакие API и любой пользователь с минимальными знаниями разберется как все настроить, поэтому смысла в плагинах я не вижу. Названный выше плагин тому подтверждение – не обновляется более 2-х лет, видимо спроса нет.
Из относительно актуальных я нашел Yandex Maps API (обновлен 4 месяца назад) и Oi Yandex.Maps for WordPress (5 месяцев назад). Если у вас есть желание поиграть в плагины, то их найдете в репозитории Вордпресс поиском, а как устанавливать плагины смотрите тут.
Вы сами убедились, что подготовить карту и разместить ее на своем ресурсе получается гораздо быстрее, чем прочитать эту инструкцию, теперь каждый ваш ресурс будет радовать своих посетителей такой удобной фишкой.
biznessystem.ru
Отрисовка схемы проезда в Illustrator
Довольно часто, в макете требуется разместить карту проезда, изобразить план-схему местности, показать нужные участки, нарисовать стрелочки-пути и т.д. Если копировать карту с интернета, например с Гугл-карты, то на ней плохо читаются названия улиц, номера домов. К тому же, она плохо подходит для вставки на макет.
Но так ли сложно отрисовать схему проезда самому, изобразить здания которые нужны, основные улицы, главные ориентиры, показать схемы проезда?
В этой статье я покажу, как нарисовать схему проезда в Adobe Illustrator. В итоге, получится вот такая карта с изображением пути от станции метро к магазину детских игрушек.
Поиск подходящей карты
Для рисунка, нужно взять за основу реальную карту, например, из интернета. Когда вы нашли нужный участок и он полностью отображается на мониторе, нажмите клавишу «PrintScreen», чтобы сделать фотографию экрана. По верх этой фотографии мы и будем рисовать основные ориентиры.
Откройте новый документ в программе Illustrator. И нажмите — Редактирование/Вставить. или сочетание клавиш CTRL+V. Теперь, фотографию нужно выровнять и заблокировать от перемещений.
Прорисовка основных элементов схемы
Почти все элементы схемы имеют прямоугольную форму, поэтому возьмем инструмент «Прямоугольник». Нарисуйте дороги и дома, чтобы дороги получились одинаковой толщины, копируйте их удерживая клавишу ALT. Тоже самое можно делать с другими одинаковыми элементами.
Но не все можно нарисовать прямоугольником или эллипсом. Бывают здания, парки или озера не правильной формы. В этом случае понадобится инструмент «Перо». Он позволяет расставлять точки, между которыми проходят прямые или изогнутые линии. Инструмент «Перо», при умелом использовании, позволяет получить практически любую форму.
Цвета вашей карты, по возможности, должны сочетаться с цветами макета. Она может состоять из нескольких цветов или быть вовсе черно-белой. Направления движения основные пункты в основном изображаются красным цветом.
Подписи улиц, номеров домов, достопримечательностей.
Когда все элементы нарисованы и раскрашены, нужно подписать названия улиц. По необходимости номера домов и все, что может помочь ориентироваться на местности.
Шрифт должен быть не слишком мелкий и хорошо читаемый. Поскольку карта схематическая, нет смысла подписывать абсолютно все, что на ней есть.
Добавление значков и стрелок на схеме проезда.
Помочь ориентироваться на местности могут также знаки остановки, пешеходные переходы, логотипы компаний и другие обозначения. Их тоже можно найти в интернете или нарисовать самому в стиле макета и карты.
Если вы не знаете на каком транспорте и откуда человек будет добираться, но стрелку можно не рисовать или сделать несколько версий пунктиром.
Такая отрисованная схема проезда используется при создании макета и ставится рядом с адресом и контактами. Глядя на такую схематическую карту, человеку легче сориентироваться на местности и найти нужное место.
Видео урок:
Как самому нарисовать схему проезда в Иллюстраторе.
Рисование схемы проезда в другом, более упрощенном стиле, можно посмотреть здесь.
expert-polygraphy.com
Как распечатать карту Яндекс
Делаем скриншот карты Яндекс (нажмите для увеличения)
В прошлой статье мы с вами разобрались как сохранить карту из Google Maps. 1 и 3 способы — универсальны и отлично работают для сохранения карт Яндекса. Здесь расскажу еще один способ.
Как сохранить большую карту Яндекса без программ
За этот способ спасибо Ивану Титову . Расскажу как я буду его использовать. Нам понадобится:
- Браузер (буду использовать Google Chrome);
- Расширение для создания скриншотов ( Nimbus Screenshot );
- Yamap.zip — [458 байт], который нужно будет настроить под себя.
Запускаем Goolge Chrome, устанавливаем расширение Nimbus Screenshot и скачиваем Yamap.zip. Распаковываем архив и открываем файл с помощью блокнота или Notepad++ . Содержимое HTML файла выглядит следующим образом. Стрелочками показаны места где нужна настройка.
Выбираем центр той местности, которая нам нужна и копируем значение «Центр карты» в center: [49.34601652, 23.52472478]. Выбираем масштаб и устанавливаем значение — zoom.
задаем размер. То есть изменяем значение width и height чтобы поместилось вся нужная территория.
Сохраняем файл Yamap.html и открываем в Google Chrome.
Сохраняем скриншот всей страницы и жмем «Готово» в правом верхнем углу. Если Nimbus Screenshot не работает с картой, проверьте настройки приложения . Это не сайт, а файл, открытый при помощи браузера по ссылке, поэтому программе нужно соответствующее разрешение .
Сохраняем получившееся изображение в компьютер или сразу распечатываем.
printerprofi.ru
Карта проезда для сайта
Карта проезда на сайте поможет посетителям найти ваш офис. И для этого пользователю не понадобится долго искать вашу организацию в справочнике, искать расположение офиса и т.д. Пользователь без лишних действий получит адрес вашей компании и схему проезда непосредственно из виджета карт на вашем сайте.
Итак, давайте разберемся, как встроить карту проезда на сайт при помощи сервисов Яндекс.Карты, Google.Maps и 2Gis. Рассмотрим каждый из способов.
Как вставить Яндекс карту на сайт
Возможность добавить виджет Яндекс.Карт у себя на сайте предоставляет сервис Конструктор карт от Яндекс. Вам необходимо лишь ввести нужный адрес, и, по желанию, изменить размер, тип карты, добавить маркеры, линии или выделить нужные области. Довольно многофункциональный сервис и популярен среди отечественных сайтов.
После того, как внешний вид карты вас удовлетворит, вы можете получить код карты и добавить его в нужном месте на своем сайте.
Как вставить Гугл карту на сайт
Гугл позволяет создать виджет карты для нужного адреса прямо из сервиса Google.Maps. Вам нужно найти на карте свой адрес, а затем нажать на значок настроек (в нижнем правом углу страницы), а затем выбрать «Поделиться с друзьями или получить код карты»:
В появившемся окне нужно перейти на вкладку «Код», где вы сможете изменить размер карты и скопировать код:
Как вставить карту 2Gis на сайт
Еще одним удобным сервисом для добавления карты проезда на сайт является 2Gis. Для того, чтобы создать свой виджет карт, необходимо в API.2Gis выбрать город, в котором расположен ваш офис, и название вашей организации. После этого вы получите готовый код, который в последствии сможете встроить на свой сайт.
Но нужно отметить основные недостатки сервиса 2Gis:
- Ваша организация должна присутствовать в справочнике 2Gis;
- Минимальный размер встраиваемой карты — 500×400, что может быть несколько неудобным, если вам нужен маленький и компактный виджет.
В конструкторе сайтов «Нубекс» все типы карт можно добавить в любой текстовый раздел в режиме правки HTML-кода.
nubex.ru
Как сделать карту в конструкторе Яндекса и разместить ее на сайте
Доброго дня, дорогие читатели!
В этой статье я расскажу о том, как сделать карту в конструкторе Яндекса и разместить ее на своем сайте. Статья будет полезна преимущественно для владельцев коммерческих сайтов, ведь именно там нужна карта с указанием адреса.
Зачем это нужно
Карта может понадобиться для коммерческих сайтов. Допустим, если где-то есть офис, и надо рассказать клиентам, как к этому офису можно проехать. Карта на сайте позволит им не тратить время на поиск карты в других местах и построить маршрут прямо здесь и сейчас.
То же касается и проектов смежных направленностей: магазины, сервисы, автомастерские и т. д. Фактически карта на сайте не просто приятный бонус, это обязательный атрибут, который никак нельзя упускать из виду.
У этого есть и другое значение – если пользователь видит, что у вашей компании есть свой офис, куда можно приехать (еще лучше, если он обозначен в Яндекс и Гугл Мапс), уровень доверия к вам значительно повышается. Ваш бизнес уже не воспринимается как что-то непонятное и сомнительное.
Карта интерактивная. Это значит, что ваши клиенты смогут сориентироваться, посмотреть схему проезда, наличие условных знаков, названия улиц.
Поэтому давайте перейдем к инструкции размещения карты на сайт.
Создание карты
Для этого мы будем пользоваться специальным конструктором карт Яндекса. Его могут использовать все, но придется пройти регистрацию и завести себе аккаунт Яндекса.
Как только вы залогинитесь, можно переходить к следующей инструкции. С помощью полей ввода адреса или курсора найдите нужное место и задайте масштаб. Делайте это с умом, потому как именно таким образом и будет выглядеть карта на вашем сайте.
Вы можете поставить метки, линии, многоугольник и пробки для того, чтобы дать посетителям дополнительную информацию. Например, о том, что где-то есть удобный проход или же наоборот, что пути нет. Но обо всем этом далее.
Все созданные вами объекты будут доступны в “Списке объектов”. Их при желании можно удалить или отредактировать.
Метками можно обозначить ближайшие станции метро или автобусные остановки. Еще меткой можно обозначить вход в здание (если оно большое) или другие офисы, если они есть.
Чтобы создать метку выберите ее в панели управления сверху и кликните по любому месту на карте. После этого выскочит окно, в котором вы сможете ввести подпись метки и краткое описание – оно будет выводиться при клике. Также вы можете выбрать цвет и тип метки. Рядом доступны и другие параметры кастомизации, например иконки или произвольное число.
Как только редактирование будет завершено, кликните на кнопку “Готово”. Можно создать сколько угодно меток. Но если их будет слишком много, пользователи могут запутаться.
С помощью линий вы можете нарисовать маршрут, отметить какие-то обходные пути или показать наиболее короткую дорогу от того же метро или остановки.
Создавать линии очень просто, выберите их в панели инструментов и кликните по нужному месту.
Линия создается по точкам, как только вы кликните на определенного место, нужно переместить курсор по направлению линии и кликнуть еще раз. Как только формирование линии будет закончено, нажмите на клавишу “Esc”. После этого всплывет окно с опциями.
Вы можете выбрать цвет, процент прозрачности и толщину линии. Также можно ввести описание, которое будет доступно при клике по объекту. Кликаем на “Готово”, как только редактирование будет закончено.
Многоугольники
С помощью многоугольников вы также можете рисовать произвольные отметки на карте. Обычно этот инструмент используют для обрисовки контура здания. Им же можно обозначить какую-то территорию или любую другую местность.
Выбираем инструмент, кликаем в нужном месте, потом кликаем еще раз, как и в случае с линиями, и вот уже на третий раз вы сможете сформировать треугольник – самый простой вид многоугольников.
То есть он формируется при помощи трех точек, ничего сложного. При желании вы можете сделать больше точек, изобразив другую фигуру.
После того, как фигура сформирована, нажимаем на клавишу “Esc”. Выскочит окно с параметрами.
Можно задать цвет контура и заливки, выбрать толщину. Обратите внимание на два поля “Прозрачность”, которые расположены параллельно контуру и заливке. Здесь вы можете задать процент прозрачности.
Если выставить 100, то нужный элемент просто исчезнет. Например, вы хотите, чтобы был только контур – вводите значение 100 в поле напротив заливки и она исчезает. То же сработает и с самим контуром. Очень удобно.
Можно закрывать редактор с помощью кнопки “Готово”. Но не спешите, есть еще кое-что, о чем надо сказать.
Пробки и слои
Эти два инструмента также могут помочь при создании карты. С помощью кнопки “Пробки” вы можете включить отображение дорог, где есть пробки. Для больших городов это очень важный пункт.
Слои же отвечают за тип карты. Например, на моих скриншотах стоит стандартный рисованный вариант. Если он вам не нравится, то вы можете выбрать спутник (думаю, не надо объяснять, что это вид со спутника) и гибрид. Последний представляет собой смесь рисованного варианта и спутника (грубо говоря: спутник с отметками).
Сохранение и получение кода
После редактирования карты вы можете сохранить ее. Для этого нужно нажать на соответствующую кнопку внизу, но не забывайте ввести название и описание.
Но это еще не все. После этого конструктор предложит нам выбрать размер карты и ее тип. Есть интерактивный, когда пользователь может менять масштаб или прокручивать карту при помощи мыши, или статичный, когда он видит простую картинку в формате PNG.
С помощью боковой панели или интерактивных уголков (можно перетаскивать) выбираем размеры. С помощью курсора ее можно масштабировать. Эти функции пригодятся вам, если в предыдущем шаге вы переборщили с размером и элементы вылезли за края.
Нажимаем “Получить код карты”, после чего нам предлагается выбрать вариант кода: JavaScript или iframe.
Код на JavaScript имеет больше возможностей. Пользователи смогут менять масштаб, вид (слои), отмечать пробки и т. д. Если же вы выберете iframe, то функционал будет урезан, посетители смогут посмотреть пробки и больше ничего.
Размещение кода на сайте
Вне зависимости от выбранного варианта вам придется размещать код на сайте. Я не буду подробно рассказывать о том, как это сделать – все индивидуально и зависит от вашей платформы.
Принцип везде один – вам необходимо просто вставить код в нужном месте страницы вашего проекта. В том же WordPress это можно сделать при помощи встроенного редактора. В других CMS этот процесс тоже мало чем отличается.
В любой момент вы можете зайти в раздел “Мои карты” и изменить какие-то параметры, добавить новые метки или линии, получить другой тип кода.
Также вы можете импортировать готовую карту из форматов XLSX, CSV, KML, GPX или GeoJSON.
Заключение
Надеюсь, теперь вы понимаете, как создать свою вариацию карты и установить ее на сайт. Тут нет ничего сложного, нужно просто следовать инструкции и читать то, что написано в официальной документации. Последнее актуально в тех случаях, когда нужно изменить размеры или вставить ее в определенный контейнер. В общем-то, не сложнее, чем сделать карту в конструкторе Google Maps – все примерно так же.
Если вы хотите лучше разбираться в сайтах, а если быть точнее – в информационных проектах, то я рекомендую вам обратить внимание на курс Василия Блинова “Как создать сайт”. В нем автор рассматривает информационные сайты как способ стабильного пассивного дохода, учит правильно создавать и продвигать ресурсы в поисковых системах. Есть уроки по монетизации и написанию контента. Обязательно заглядывайте.
iklife.ru