10 бесплатных инструментов для создания карт / Полезное / Сайты и биржи фриланса. Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY

Статическая карта

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

— идентификатор карты (обязательный параметр).

Пример значения параметра: .

Примечание. В предыдущих версиях Конструктора идентификатор карты задавался через параметр . Пример: . Этот параметр является устаревшим.
— ширина карты в пикселях (если не задана, берется из сохраненных параметров карты);
— высота карты в пикселях (если не задана, берется из сохраненных параметров карты).
— локаль. Поддерживаются следующие значения: ru_RU (по умолчанию), ru_UA, uk_UA, en_RU, en_US, tr_TR. Подробнее в разделе Локализация карты.
— ключ от API Карт. Необходимо передавать в случае, если карта используется в коммерческих целях. Подробнее см. в разделе .

Примечание. Строка кода может быть вставлена только в элемент .

Ниже рассмотрены примеры размещения статической карты на странице.

Пример 1. Вставка статической карты без указания размеров

Конструктор

Создает экземпляр карты.

Параметры:

Параметр	Значение по умолчанию	Описание
* Обязательный параметр/опция.»}}»>*	—	Тип: Object\|String Ссылка на HTML-элемент, в котором размещается карта, или идентификатор этого HTML-элемента.
* Обязательный параметр/опция.»}}»>*	—	Тип: Object Параметры карты.
	—	Тип: String[] Включенные поведения карты. По умолчанию включаются: перетаскивание карты, масштабирование карты мультисенсорным касанием и двойным кликом на устройствах с сенсорным экраном; перетаскивание карты мышью, масштабирование двойным щелчком и выделением области правой кнопкой мыши на остальных устройствах. Можно указывать любые ключи, которые поддерживаются map.behavior.Manager.
	—	Тип: Number[][] Геокоординаты начальной области показа карты. При инициализации карты может быть задана либо пара state.zoom-state.center, либо данная область. Если совместно со state.bounds будут заданы параметры state.zoom, state.center, они будут проигнорированы.
	—	Тип: Number[] Геокоординаты центра карты. Должны быть заданы совместно со state.zoom.
	‘yandex#map’	Тип: String\|MapType Тип карты. Может быть ключом или экземпляром класса MapType. Список доступных ключей: ‘yandex#map’ — тип карты «схема»; ‘yandex#satellite’ — тип карты «спутник»; ‘yandex#hybrid’ — тип карты «гибрид».
	—	Тип: Number Коэффициент масштабирования карты. Должен быть задан совместно со state.center.
	—	Тип: Object Опции карты. Через опции карты можно задавать настройки как самой карты, так и добавленных на неё объектов: опции ; опции с префиксом ; опции с префиксом ; опции с префиксом ; опции слоев с префиксом ; опции слоев хотспотов с префиксом ; Опции, которые трактует непосредственно сама карта, перечислены ниже.
	false	Тип: Number Выбранного типа карты с текущим кооэффициентом масштабирования тайлов может не оказаться. При значении true кооэффициент масштабирования будет изменен на ближаший допустимый.
	‘ifNull’	Тип: String Автоматическое слежение за контейнером карты. По умолчанию карта перестроится автоматически в случае, когда она инициализируется из скрытого контейнера, либо мы программно поменяли его размеры, иначе необходимо вызвать map.container.fitToViewport. Доступны следующие значения: none — не следить за изменением отображения контейнера при инициализации из скрытого контейнера или при программном изменении его размеров; ifNull — как только контейнер получит CSS значение «display», отличное от «none», автоматически запустится map.container.fitToViewport, чтобы подстроить карту под него. После слежение будет остановлено; always — постоянно следить за изменением состояния отображения контейнера карты.
	true	Тип: Boolean true — карта не будет останавливаться на дробных значениях коэффициента масштабирования, false — будет.
	5	Тип: Number Максимальная разница между текущим и выставляемым коэффициентом масштабирования карты, при котором масштабирование будет происходить плавно.
	23	Тип: Number Максимальный коэффициент масштабирования карты.
	Тип: Number Минимальный коэффициент масштабирования карты.
	ymaps.projection.wgs84Mercator	Тип: IProjection Проекция карты.
	false	Тип: Boolean\|Number[][] Устанавливает область просмотра карты так, чтобы пользователь не мог выйти за пределы этой области. True — установить область в соответствии с текущей областью отображения, false — отключить опцию. Если необходимо ограничить область с известными координатами, нужно указать эту прямоугольную область.
	false	Тип: Boolean Нужно ли в устаревших версиях браузеров скрывать уведомление над картой с предложением обновить браузер.
	true	Тип: Boolean true — включить автоматическое переключение на Народную Карту там, где схема недостаточно подробна, false — выключить. Эта опция работает только при значениях параметра lang=ru-RU и lang=uk-UA.

* Обязательный параметр/опция.

Примеры:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Как представлен функционал Maps-creator.com ?

Чтобы эксплуатация Maps-creator.com не вызывала сложностей у пользователя, стоит ознакомиться с функционалом сервиса. Первым инструментом, позволяющим отмечать собственные маршруты на картах Яндекс, можно назвать ломанную линию. Для ее использования достаточно нажать мышкой на соответствующую иконку, после чего можно делать отметки на карте. Ломанная линия выстраивает прямую между двумя проставленными ранее точками. В случае повторного нажатия на одну и ту же точку удаляется весь сегмент.

Другой, не менее полезной фигурой является круг. Выбрав круг, пользователь определяет его местоположение на карте, после чего вручную настраивает диаметр. Для выделения целой области сложной геометрической формы Maps-creator.com на базе Яндекс Карт способен предложить такую фигуру, как многоугольник. Отметить единичный объект на карте позволяет «Метка», выбор которой возможен после нажатия на значок.

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

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

Зачем нужна интерактивная карта

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

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

С развитием интернет сервисов, таких как Яндекс Карты и Google Maps, появилась возможность сделать карты живыми – интерактивными. Такие можно вертеть в разные стороны, менять масштаб, маршруты с разных точек задавать, планировать свое перемещение с учетом пробок и многое другое.

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

И для того, чтобы помочь вам сделать свой веб ресурс более приветливым к людям я расскажу, как добавить Яндекс карту на сайт, делается это очень легко с помощью специального конструктора (не сложнее чем вставка видео с Youtube).

Создание и удаление карты

Для создания карты предназначен класс Map. В конструкторе класса необходимо указать:

HTML-элемент, в котором будет размещена карта. Можно использовать как ссылку на HTML-элемент, так и его идентификатор (значение атрибута id);
координаты центра карты;
коэффициент масштабирования.

Пример:


Скопировано

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

Для удаления карты из DOM используется метод .


Скопировано

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

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

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

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

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

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

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

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

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

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

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

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

Элементы масштабирования

API предоставляет два элемента для управления масштабом карты:

— полный элемент масштабирования;
— компактный элемент масштабирования.

Обзорная карта

YMaps.MiniMap – элемент «обзорная карта», представляющий из себя мини-карту показываемой местности, масштаб которой на несколько пунктов меньше основной.

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

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

Если смещение отрицательно, то обзорная карта будет работать по принципу лупы, то есть отображать увеличенный фрагмент карты. Например:

Переключатель типа карты

YMaps.TypeControl – элемент управления, позволяющий выбрать тип карты (например, «Гибрид» или «Спутник»).

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

types — список типов карт (по умолчанию добавляются три стандартных типа);
listTypeIndexes — список индексов типов карты в списке, которые должны быть скрыты под ссылкой «Еще…». Нумерация элементов списка начинается с нуля.

Чтобы добавить в переключатель типов карт пользовательский тип карты используйте метод , а чтобы удалить — метод , см. Создание пользовательского типа карты.

Масштабная линейка

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

Масштабная линейка не имеет дополнительных параметров.

Поиск по карте

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

Результаты поиска выводятся внутри самого элемента в виде списка ссылок на найденные объекты (с возможностью постраничного перелистывания).

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

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

Что представляет собой конструктор карт?

Конструктор карт представляет собой многофункциональный веб-инструмент, работоспособность которого обеспечивается набором готовых функций и процедур API. Для обеспечения оптимальной работы в основе api-конструктора лежит картографическая система «Яндекс.Карты», отличающаяся высокой географической точностью, а также достоверными данными о наименованиях улиц и значимых элементов инфраструктуры стран СНГ.

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