Конструктор карт на яндекс и google api

QuickMaps

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

Хотя на первый взгляд может показаться, что инструментов здесь не так уж и много, на самом деле все необходимое присутствует. Вы можете отмечать треки прямыми линиями или в режиме свободного рисования, делать текстовые пометки, импортировать файлы в форматах KML или GPX из Сети и загружать их со своего компьютера. А по части разнообразных маркеров QuickMaps может дать фору куда более серьезным сервисам.

Готовую карту вы можете сразу же сохранить и получить постоянную ссылку для просмотра, а также код для встраивания в любой сайт в виде виджета. Кроме того, возможен экспорт данных в формате KML или GPX.

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

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

Начинается процедура с этой странички – tech.yandex.ru/maps/tools/constructor/

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

Фишка в том, что вы сможете вставить не просто Яндекс карту с точным адресом, а карту с любым количеством объектов выделенных разными маркерами и цветами – объектами, точками, маршрутами.

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

Добавление объектов

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

После нажатия на кнопку найти на местности появится точка, соответствующая расположению заданного объекта. Вставить можно много объектов. Пример с Кремлем:

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

Слева наполняется список всех отмеченных на карте адресов.

Изменение масштаба и положения

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

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

Контуры объектов (многоугольники) и линии

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

Точек может быть сколько угодно, поэтому, фигура, закрашенная на карте, допускает любую степень сложности. Завершить построение контура можно кликом мыши по последней установленной точке или переключением на любую другую кнопку конструктора (например, на линии). Я выделил контуры Московского Кремля по его стене:

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

Таким способом можно показать оптимальный маршрут осмотра достопримечательностей.

Конечную точку подтверждаем повторным ее нажатием мышью, там будет меню «Удалить»/«Завершить». После выбора завершения открывается поле для подписи к конечной точке и настройки параметров линии (толщина, цвет, прозрачность).

Завершаем маршрут нажатием на «Готово».

Вид карты и наложение пробок

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

А вот переключение режимов между схемой, спутником и гибридом может пригодиться.

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

Название и описание

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

Как разместить контактные данные на странице или сайте

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

• в нижней части страницы (футере, подвале);

• в разделе с контактными данными;

• более редкие варианты – на главной странице сайта или в разделе об оплате и доставке. В последнем из названных мест карту, как правило, размещают в случае, если предусмотрен самовывоз товара.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Это интересно: Зачем нужны Яндекс.Коллекции

Карта для сайта: преимущества

Нарисовать карту «Яндекс» стоит по трем причинам:

1. . Поведенческие факторы сайта автоматически увеличиваются при использовании многообразия контента. Ссылки, объекты, информативные блоки, подсказки – независимо от выбора поискового робота, подход оценят и повысят позиции в выдаче.
2. Из-за информативности и наглядности. Разыскать нужный дом в «развивающемся населенном пункте», где два проспекта и четыре улицы, можно и по памяти, а вот запомнить каждый поворот в шумном городе не получится даже при сильном желании. В этом случае карта для сайта подскажет, как добраться до нужного адреса еще в браузере. А также, какой транспорт использовать, где намечаются пробки, и когда стоит сворачивать с шоссе. Внимательные владельцы сайтов могут даже номер парадной заранее указать и код от домофона.
3. Для удобства. Первые три раза ответить на вопросы о месторасположении организации способен каждый. А вот терпеть постоянные звонки, а потом часами проговаривать одинаковую информацию способны только терпеливые и отзывчивые храбрецы. И если нервы все-таки дороже, то выручит стандартная подготовка в редакторе, и вопросы автоматически отпадут.

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

? Приводит ли повышение МРОТ к повышению доходов россиян

Повышение МРОТ не способствует повышению доходов россиян. В лучшем случае все просто остается по-старому. Дело в том, что МРОТ привязан к прожиточному минимуму, а последний предполагает минимально необходимый уровень дохода для удовлетворения самых базовых потребностей. В прожиточный минимум входят продуктовая корзина, обязательные услуги и платежи, но та же потребительская корзина довольно скудная и ее сбалансированность давно вызывает вопросы.

Некоторым людям, особенно бюджетникам, оклад которых привязан к МРОТ, может показаться, что с увеличением минималки вырастет и их зарплата. Да, это так, но это лишь один из аспектов. Нельзя сбрасывать со счетов инфляцию, девальвацию рубля и т. д. МРОТ повысили, но за год цены тоже выросли.

TripGeo

Этот сервис интересен тем, что позволяет не только проложить трек по карте, но и увидеть, как он будет выглядеть в реальности. TripGeo использует данные Google Maps и Google Street View и объединяет их в одном интерфейсе, позволяя совершить виртуальное путешествие по выбранному маршруту.

Вам потребуется указать точку старта и финиша, а также желаемый способ передвижения (автомобиль, велосипед, пешком). Кроме этого, следует указать еще несколько параметров, касающихся скорости отрисовки и масштаба изображения, после чего TripGeo подберет вам оптимальную траекторию передвижения и тут же создаст специальный виджет, в котором нижняя часть будет отображать карту, а верхняя — реальный вид этого места. Вам остается только нажать на кнопку Play и отправиться в путешествие.

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

Код карты для вставки на сайт

Наша карта уже готова и теперь надо получить ее код для вставки на сайт, Яндекс дает возможность сделать:

• интерактивную карту (о которой я говорил с самого начала);
• статическую – обычная картинка, только с мудреным кодом, ничего двигать в ней нельзя, в добавок еще и максимальное число объектов ограничено;
• печатную – файл-изображение высокого качества, поддерживаются не все страны, в основном СНГ и Турция, не поддерживаются спутниковая и гибридная версия.

Выбор между ними будет выведен сразу после сохранения.

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

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

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

<script src="https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=yuT1upU8LfY96ktw_VKynY1L0Gny2F6X&amp;width=600&amp;height=400&amp;lang=ru_RU&amp;sourceType=constructor" type="text/javascript" charset="utf-8"></script>

При выборе печатной карты добавится выбор формата файла – png или jpg, и кода, соответственно, не будет – кнопка скачивания вместо него появится. Такой файл тоже можно вставить на сайт, только надо будет закачивать его на хостинг и, при отсутствии визуального редактора у вашего сайта, надо будет выписать изображение в HTML теги (src)

Для чего это нужно?

Самое простое – для удобства Ваших потенциальных покупателей и клиентов, ведь гораздо проще наглядно увидеть где находится Ваш магазин среди незнакомых улиц и домов, чем просто искать по названию улицы и самому прокладывать маршрут. То есть, он может вписать в нее адрес собственного отправления и карта находящаяся у Вас на сайте автоматически проложит самый удобный для него маршрут до выбранного клиентом пункта назначения из указанных Вами точек. (Магазин, Шоу-Рум, Кафе и тд.). Но он же может это сделать через обычную карту, коих сейчас огромное множество, не так ли? Да, но при этом он покинет Ваш сайт и есть вероятность что Вы потеряете клиента, а так с помощью встроенной интерактивной карты он останется на сайте и точно доберется до конечного пункта назначения.

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

Технические вопросы

Как подключить фиксированную версию JavaScript API?

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

Примечание. Со временем мы можем отключить устаревшую JavaScript API. Если вы использовали эту версию в своем проекте, то у вас автоматически подключится последняя версия API.

Как вставить карту в блог, если в нем запрещены скрипты?

Если ваш блогохостинг запрещает использование скриптов, то вставить интерактивную карту с помощью JavaScript API не получится. Для вставки интерактивной карты вы можете воспользоваться . При добавлении Виджета на сайт карта будет размещена в отдельном iframe.

Вы также можете использовать статическое изображение карты. Для получения изображения карты воспользуйтесь Конструктором карт либо Static API.

Я перешел с JavaScript API 2.0 на версию 2.1, но код перестал работать. Есть ли инструкции по переходу?

Версии 2.0 и 2.1 являются обратно несовместимыми. Ознакомьтесь с Руководством по переходу на JavaScript API 2.1.

Можно ли использовать API карт на сайте с CSP?

Можно. Подробнее читайте в документации в разделе .

Я размещаю на сайте карту с помощью JavaScript API, но карта не отображается. Что я делаю не так?

1. Убедитесь, что при подключении АПИ вы передаете правильный ключ. Если у вас нет ключа, получите его в Кабинете разработчика.

2. Убедитесь, что при создании экземпляра карты вы указали верный идентификатор DOM-элемента.

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

4. Карта не отобразится, если на момент ее создания код API еще не был загружен. Чтобы при работе с картой код API был гарантированно загружен, его рекомендуется размещать в функции ymaps.ready(). Подробнее см. в разделе .

Можно ли сохранить состояние карты в URL?

Можно, см. пример.

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

См. пример.

Почему на моем сайте геолокация перестала работать или стала определять неточное положение?

Вероятнее всего ваш сервис расположен на http-домене. Google запретил определение местоположения средствами браузера на не https-доменах. В этом случае в консоли браузера выводится соответствующая информация: https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins

Я задаю свойства/опции объектам карты, но они не применяются. В чем может быть проблема?

Возможно, вы неправильно используете систему префиксов при задании свойств или опций. Например, чтобы задать свойства для значка метки, нужно использовать префикс ‘icon’ (), чтобы задать свойства для значка кластера, нужно использовать префикс ‘clusterIcon’ (). Кроме того, использование префиксов зависит от того, на каком уровне задаются свойства — через сам объект, через его коллекцию или на уровне карты. Подробнее см. .

Можно ли изменить внешний вид точек маршрута?

Можно. Пример в песочнице: Настройка отображения мультимаршрута.

Почему при использовании кластеризации метки не отображаются на карте?

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

Я хочу рассчитать площадь полигона/прямоугольника/круга на геодезической поверхности. Есть ли в API специальный инструмент?

Для вычисления геодезической площади фигур можно воспользоваться внешним модулем: https://github.com/yandex/mapsapi-area. Модуль может использоваться совместно с API.

Геокодер возвращает пустой результат или не тот результат, который я хочу увидеть. Что делать в этом случае?

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

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

3. Если искомого объекта нет на самой карте Яндекса, вы можете нарисовать его на Народной карте или сообщить об ошибке на странице Яндекс.Карт.

При нажатии на кнопку «Открыть в Яндекс.Картах» пропадает часть маркеров. Почему?

Яндекс.Карты, Google Maps и другие конструкторы

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

Yandex.Maps

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

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

На карте вы сможете нарисовать:

• метки — подъезды, пункты встречи и т. д.
• линии — улицы, маршруты, границы и т. д.
• многоугольники (в том числе с внутренним контуром) — дома, коттеджные поселки, озера и т. д.

Также, существует три типа карт, которые Вы сможете создать с помощью этого конструктора – статический, интерактивный и печатный. Каждый из них несет за собой конкретную задачу.

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

Интерактивный – карта, которую Вы сможете поместить на сайт или интегрировать в любое приложение(в том числе и мобильное). Любой пользователь может с ней активно взаимодействовать, подбирать для себя удобный маршрут или ближайшую к нему точку среди предоставленных Вами.

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

Если вы хотите использовать более сложные элементы, то вам нужны навыки программирования и умение работать с API Yandex Maps.Вот пример того, чего не может конструктор. Кластеризация данных:

Подробнее о кластеризации можно прочитать здесь

Goolge Maps

Конструктор карт Google Maps – почти те же самые функции, что и конструктора от Яндекса, но главным отличием здесь является то, что Вы на сайт добавляете карту Google.

Данный конструктор позволяет добавить Вам:

до 10 000 линий, фигур или мест; 

до 50 000 точек (в линиях и фигурах);

до 20 000 ячеек таблицы данных.

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

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

Mapbox

Конструктор карт Mapbox – отлично подойдет для тех, кто хочет добавить интерактивную карту на свой сайт не в России и хорошо знает английский язык. У него тоже есть свои преимущества и недостатки, о которых пришлось бы писать отдельную статью, но в первую очередь простота использования и создания данной карты. Создателями карты и самого конструктора созданы подробные туториалы по каждому из действий.

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

Если Вам не подошел ни один из этих конструкторов или Вы просто хотите узнать информацию о других конструкторах карт стоящих Вашего внимания, оставляем их названия.

Zeemaps

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

Maps.Me

Map Me – сервис с хорошими отзывами. 

Голосов 
(8)

Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)

Размещение карты на сайте, созданном на WordPress

Допустим, необходимо разместить карту на странице с контактными данными. Здесь уже есть информация, в частности, адрес компании и номер контактного телефона. Ниже будет расположена созданная карта. Чтобы начать работу, нужно воспользоваться панелью администрирования сайта. Следующий шаг – перейти в раздел меню «Страницы» и найти нужную, то есть с контактами. Затем необходимо кликнуть на надпись «Изменить» и перейти из визуального режима в текстовый. Теперь следует скопировать в конструкторе карт iframe и вставить его на страницу после текста в самом низу. Осталось обновить страницу, и на ней появится карта. При необходимости можно изменить её размеры (высоту и ширину) непосредственно в коде, предоставленном Яндексом. Для этого надо найти соответствующие теги (height и width) и прописать показатели в кавычках. Можно поместить карту и в подвале (футере) сайта. Так делают в основном на посадочных страницах (лендингах). В этом случае нужно изменить HTML-код, вставив в него полученный в конструкторе код.

Технология GPS

Технология GPS в настоящее время наиболее популярна, а также именно этот способ дает представление о том, что такое геолокация в телефоне. Технология GPS основана на получении наиточнейших данных с навигационных спутников. Но для получения результата запроса о местоположении требуется некоторое количество времени, что является небольшим недостатком данной технологии. Если вы хотите узнать на примере вашего смартфона, что такое геолокация (в телефоне «Леново», например), тогда необходимо выполнить следующие команды: «Меню», «Настойки», «Геолокация».

Несомненным плюсом данного метода является высокая точность результата.

Минусы:

• Низкая скорость обработки данных.
• Прерывание связи со спутником в некоторых помещениях/метро/лифте.
• Иногда требуется установка специального приложения на гаджет.

Теперь вы понимаете, что такое геолокация в телефоне, как установить эту функцию.

Создание собственной карты в конструкторе

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

Вариант 1: Как сделать схему проезда

Схема проезда — это удобное обозначение пути от одного объекта к другому. Здесь же можно указать самую короткую дорогу. Чтобы создать карту Яндекс с указанием условных обозначений:

1. Авторизуетесь в Яндекс, затем перейдите к конструктору. Сразу дайте название карте и сделайте ее описание. Блок для заполнения находится в левой части экрана.

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

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

1. В нижней части экрана появится блок. В его пустую графу введите описание объекта. Этот текст будет виден при клике на точку назначения на карте. Затем нажмите кнопку «Готово».

1. В блоке слева будет обозначено расстояние от одной точки до другой.

1. В нижнем левом углу нажмите кнопку «Сохранить и продолжить». Этим действием подтверждаются условия лицензионного соглашения.

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

1. В левом блоке выберите действие, которое необходимо выполнить с картой: «Вставить на сайт» или «Распечатать». Здесь же можно получить код для вставки, ссылку на созданный объект или сменить тип карты.

1. Если нужно экспортировать готовую схему проезда, нажмите кнопку «Экспорт».

1. В новом окне следует выбрать тип файла для сохранения. Выберите удобный формат и нажмите кнопку «Скачать» или «Сохранить на Я.Диск».

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

Вариант 2: С несколькими точками

Если организация имеет два офиса или любые другие объекты, потребуется создание интерактивной карты с использованием нескольких точек. Чтобы нарисовать карту Яндекс:

1. Входим в сервис, создаем карту и делаем к ней описание. Теперь переходим к инструменту «Метки».

1. Устанавливаем объект в точном месте на карте. Для этого увеличьте ее так, чтобы были видны номера домов. Таким же образом отмечаем второй объект на карте.

1. В появившемся окошке прописываем название метки и даем ее описание. Далее нажимаем «Сохранить и продолжить». Все остальные действия выполняем, как в предыдущей инструкции.

По возможности следует указывать несколько путей к объекту, особенно если организаций в городе несколько.

Плагины для WordPress и других CMS

Раньше делать карты было сложнее и многие пользовались для этих целей специальными плагинами, например, для WordPress был такой – Yandex Maps for WordPress. Сейчас не нужны никакие API и любой пользователь с минимальными знаниями разберется как все настроить, поэтому смысла в плагинах я не вижу. Названный выше плагин тому подтверждение – не обновляется более 2-х лет, видимо спроса нет.

Из относительно актуальных я нашел Yandex Maps API (обновлен 4 месяца назад) и Oi Yandex.Maps for WordPress (5 месяцев назад). Если у вас есть желание поиграть в плагины, то их найдете в репозитории Вордпресс поиском, а как устанавливать плагины смотрите тут.

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

Заключение

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

При необходимости сделать информативный отчет о вашем путешествии лучше обратить внимание на Tripline и Animaps, которые позволяют не только привязывать к треку фотографии и видеоролики, но и заворачивают все это в эффектную оболочку. Ну а для действительно серьезной работы с картами стоит использовать Scribble Maps или Open Street Map, обладающие очень богатой функциональностью