Конструктор карты проезда. Как создать свою карту для спутниковой навигации. Плагины для WordPress и других CMS

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

В этой статье мы расскажем для чего и как вставить карту Яндекса на сайт.

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

Для чего нужна карта на сайте?

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

• Обратите особое внимание: наличие карты в значительной степени повышает степень доверия к вашей ресурсу. Визуальное отображение месторасположения компании, офиса, магазина, подсознательно раскрепощает потенциального клиента (избавляет от опасений, вроде: "а вдруг обманут и исчезнут?"), а значит увеличивает вероятность того, что посетитель сайта станет реальным вашим клиентом.
• Наличие интерактивной карты (в отличие от карты-изображения) позволяет пользователю лучше сориентироваться на местности, посмотреть ближайшее метро, автомобилистам - проверить маршрут на дальних подступах к объекту. Кроме того, интерактивная карта позволяет посмотреть на местность из космоса.
• Ну, и конечно же, карта на сайте нужна для того, чтобы посетители и клиенты сайта знали месторасположение вашего магазина, офиса, склада.

Как вставить карту Яндекса на сайт (пошаговая инструкция)

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

В этой статье мы приводим примерную пошаговую инструкцию, которая, как мы надеемся, поможет вставить карту Яндекс на ваш сайт:

Шаг 1. Начальная настройка Яндекс карты для сайта:

• Откройте страницу конструктора Яндекс.Карт для сайта .
• Найдите на карте необходимое географическое место по адресу или вручную (с помощью масштабирования ползунком и перемещения карты мышью).
• Выберите удобный для работы масштаб. Окончательный масштаб лучше установить в конце работы. Рисовать будем метки на карте, линии (подъездные пути) и контуры зданий или территорий.
• Укажите в соответствующем поле название будущей карте.
• Перейдем к инструментарию сервиса: кнопки для рисования точек (меток на карте), линий, многоугольников (контуров) и размеров карты.

Шаг 2. Рисование на карте точек (меток):

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

Шаг 3. Настройка свойств установленной на карте метки:

• Кликаем непосредственно по нарисованной нами метке.
• В открывшемся окошке выбираем нужные нам свойства (цвет, номер метки на карте), пишем по желанию текст (в последствии текст будет виден пользователю при клике по метке).
• Любую метку можно удалить в соответствующем окошке свойств.
• Итак мы вставили на Яндекс-карте для сайта метку вашего офиса, настроили её свойства, теперь переходим к рисованию линий. К примеру, линии подъездного пути к офису.

Шаг 4. Рисование линий на карте:

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

Шаг 5. Рисование многоугольников, заполненных цветом контуров:

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

Шаг 6. Изменение размеров карты для сайта:

• Кликаем по кнопке изменения размеров.
• Перемещая квадратные маркеры по контуру карты, можно изменить размер до необходимого. Всё просто.
• Переходим к финалу создания карты.

Шаг 7. Получение кода карты для сайта (Яндекс):

• Придаем карте окончательный вид, установив финальный масштаб карты и окончательную позицию (координаты).
• На этом этапе создание карты для сайта (Яндекс) можно считать законченным. Нажимаем на большую желтую кнопку "Сохранить и получить код".
• Даже после сохранения карты всегда можно вернуться к редактированию.
• Обратите внимание на то, что карта может быть не только схемой, но и фотоснимком из космоса, гибридом или элементом "Народной карты".
• Кроме того, вы вольны сделать карту интерактивной или простым изображением. Интерактивная карта интересней, функциональней, но может загружаться дольше простого изображения. Выбор за вами.
• Вставить карту Яндекса на сайт можно, разместив html-код карты в нужном вам месте страницы.

Спасибо всем читателям, заинтересовавшимся нашей пошаговой инструкцией.

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

Если вам понравилась наша инструкция, можете порекомендовать её своим друзьям и знакомым. "Социальные кнопки" находятся справа. Такова наша маленькая корысть .

Хотите создать собственные карты Google Map всех тех прекрасных городов, в которых побывали? Или, может быть вы хотите создать свою карту с аннотациями, которая покажет удобные направления движения к вашей компании или дому? Или, может быть у вас есть клиенты в различных частях мира, и вы хотели бы отобразить их отзывы на карте Google.

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

Как сделать карту Google Maps

Один из самых простых способов для создания пользовательских карт, это сделать это через сам сайт Google Maps. Откройте maps.google.com и нажмите Создать карту в разделе Мои Места. Далее найдите место, или введите координаты вручную, и сохраните их в пользовательской карте. Повторяйте, тот шаг пока не будут добавлены все места на карту Google.

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

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

Как создавать более точные карты маршрутов

Если у вас есть смартфон, вы также можете использовать GPS приложения, вроде My Tracks для android скачать бесплатно на сайте по ссылке, которые фиксируют ваше местоположение в разное время, а затем создают полный маршрут из этих точек. Находясь в отправной точке, нажмите кнопку Старт на вашем телефоне. Как только вы достигли места назначения, остановите запись и приложение экспортирует ваш маршрут как Google Map.

Другой вариант для рисования карты передвижения – QuikMaps . Программа преобразует Google Maps в изображение, и вы можете прокладывать маршруты на карте так же, как вы рисуете от руки на любом холсте. После того как вы набросаете маршрут, экспортируйте его в виде KML файла, который может быть импортирован в Google Maps или Google Earth для публикации.

Создание Google Maps из листов Excel

Одно небольшое неудобство с помощью инструмента Google Maps является то, что сервис не позволяют ввести точки массово. Да, есть варианты, чтобы импортировать KML и GeoRSS файлы, но как же создать эти файлы?

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

Как добавить анимацию к вашим картам Google

Вы может быть видели карты отслеживания полета, где несколько изображений самолета, двигаются по разным траекториям на одной карте Google. Если вы хотели бы иметь что-то подобное для вашей собственной карты Google Map, посмотрите на сервис Animaps.

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

Пользовательские Google Maps для продвинутых пользователей

Опытные пользователи могут создавать собственные Google Maps, просто изменив несколько параметров в URL карт. API (Static Maps API) статических карт имеет полный список параметров, поддерживаемых Google Maps, а также несколько примеров. Большим преимуществом использования карт является то, что вы можете изменить их довольно быстро, и легко вставлять в веб страницы не используя IFRAMES или JavaScript.

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

Сейчас у многих имеются устройства, так или иначе оснащённые спутниковой GPS-навигацией. Это может быть смартфон, карманный компьютер, коммуникатор или же просто навигатор. Во многих случаях качество предустановленных карт оставляет желать лучшего, особенно для пеших походов. Тут могут помочь online-источники спутниковых снимков и карт. Достаточно сравнить два изображения одного участка:

Слева — спутниковый снимок Google maps, справа — тот же участок на карте. Который из них выглядит подробней?

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

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

Получение спутникового снимка или карты местности

На этом этапе нам понадобится программа SAS.Планета, скачать которую можно на официальном сайте sasgis.ru

Первым делом требуется указать в качестве источника данных Интернет и кэш:

А также выбрать нужный тип карты. Что это будет — спутник или карта Google, карты Яндекса или спутниковые снимки с геопортала Роскосмоса, а то и генштабовские карты — зависит только от Ваших личных предпочтений и качества источника на требуемом участке.

Итак, находим визуально, по координатам или встроенному поиску нужный участок. Определяем требуемую детализацию, увеличивая масштаб изображения. Текущий масштаб указывается слева, под линейкой масштабирования, в относительных уровнях (z14, z16 и так далее). Он пригодится нам на следующем этапе. Ориентируйтесь на то, чтобы нужные объекты были хорошо различимы и не «замылены». Но и не забывайте, что каждый уровень детализации увеличивает размер результирующей карты.

Уменьшаем масштаб до тех пор, чтобы весь нужный участок карты вошёл в экран. Выбираем инструмент «прямоугольное выделение» (вторая слева кнопка на панели инструментов или сочетание Ctrl+R на клавиатуре), и выделяем границы нашей будущей карты.

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

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

Выбираем в меню выделения пункт «Предыдущее выделение», либо нажимаем Ctrl+B на клавиатуре, чтобы заново не выделять ту же самую область, и появится знакомое нам окно.

На этот раз нас интересует вкладка «Склеить». Здесь потребуется настроить большее количество параметров:

• Результирующий формат — формат изображения, в котором будет сохранена наша карта. Для дальнейшей обработки желательно выбирать BMP, хотя он и занимает больше места, но понимается всеми программами и не имеет потерь при кодировании.
• Куда сохранять — здесь надо указать папку и имя файла, в который будет сохранена карта.
• Тип карты — будет автоматически подставлен текущий источник.
• Масштаб — не забудьте выставить нужный уровень детализации. По умолчанию программа выставила низкодетализованный, отображающийся сейчас на экране.
• Наложить — здесь на карту можно наложить дополнительные слои. Такие, как Гибрид для Google maps, где отображены основные дороги и условные обозначения. Иногда может быть полезным для уточнения спутниковых снимков или нанесения на них названий населенных пунктов. Для этого не забудьте прогрузить дополнительный слой с нужным уровнем детализации при помощи метода, описанного выше.
• Создавать файл привязки — отметьте галочкой пункт «.map», он нам пригодится на следующем этапе. В файле будут сохранены географические координаты углов результирующего изображения.

Нажимаем кнопку «Начать» и через некоторое время в указанной папке получаем два файла — изображение с картой и.map-файл привязки к координатам. Некоторые навигационные программы могут напрямую использовать такие изображения. Но для карманных устройств с ограниченным количеством ресурсов лучше всё же сохранить карту в специальном формате.

Обработка снимка в графическом редакторе

Нередко из-за не совсем удачных условий освещения, или мешающей дымки, или в силу ещё каких-то причин спутниковые снимки бывают «слепыми», особенно при отображении их на экране мобильного устройства в яркий солнечный день. Для улучшения можно провести небольшую коррекцию в любом графическом редакторе. Я покажу это на примере бесплатного XnView , но Вы можете использовать любой другой подходящий (от IrfanView до Photoshop), эта процедура везде аналогична.

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

На снимке выше показано исходное изображение и нахождение пункта меню «Автокоррекция уровней», который можно использовать для автоматической подстройки контраста. На снимке ниже — результат этой операции. Как можно увидеть — цветность и контраст изображения увеличились, различимость дорог и водных объектов тоже немного улучшилась.

Можно использовать также ручной режим — правку контраста и гамма-коррекции (увеличить то и другое):

или Оттенка/Насыщенности/Осветленности. Ориентируйтесь на более подходящих для Ваших условий вариант.

Преобразование снимка в формат OziExplorer

Для дальнейшего преобразования картинки в более компактный формат, понимаемый OziExplorer-ом нам понадобится утилита img2ozf. Скачать её можно бесплатно на официальном сайте OziExplorer: oziexplorer3.com/img2ozf/img2ozf.html . По ссылке — последняя версия утилиты, сохраняющая в ozfx3 формат. Для ozf2-файлов (используются в более старых версиях OziExplorer) потребуется найти более старую версию утилиты. В этом вам поможет поиск .

Устанавливаем и запускаем программу. В поле Source Image Folder указываем путь, по которому лежат подготовленные изображения и соответствующие им.map -файлы. В поле Destination Folder указываем, куда складывать конвертированные карты (если нажать синюю стрелочку слева, будет использоваться папка с исходными файлами). Можно поиграться с количеством цветов (поле Number Colors в левой части). Чем больше количество цветов, тем плавней картинка, но тем больше размер результирующего файла.

Отмечаем галочками нужные для конвертирования изображения и нажимаем большую кнопку Process Image Files to OZF Files.

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

Как только в строке статуса появится надпись Completed — конвертирование завершено. В папке, указанной в Destination Folder появятся два файла — .ozfx3 (или.ozf2 для старой версии) и соответствующий ему.map-файл (который, в отличие от исходного, будет иметь имя типа исходное_название _ozf.map).

Теперь осталось оба этих файла залить на мобильное устройство, и указать OziExplorer место, где они лежат.

Например, так выглядит окно OziExplorer со спутниковыми снимками в Windows Mobile:

Вот и все, карты готовы.

Если что-то осталось непонятным — спрашивайте в комментариях — постараюсь ответить.

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

Вконтакте

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

Как создавать пользовательские маршруты в «Google Картах»

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

1. Нажмите иконку «Создать новую карту» .

2. Имя карты можно изменить, нажав на «Карта без названия» .

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

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

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

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

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

8. Пользователи iPhone смогут просматривать карты в приложении «Карты Google» , нажав «Меню» → «Карты» .

Помимо маршрутов, вы также можете создавать слои со специальными пометками, например, ресторанами или достопримечательностями.

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

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

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

Очевидно, что услуги геолокации будут играть все более важную роль в будущем и потребность в подобных услугах будет только расти.

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

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

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

Mapme

Стоимость: бесплатно, $99 и $199

Animaps

Стоимость: бесплатно

Click2Map

Стоимость: $39 в месяц

Zee Maps

Стоимость: бесплатно (до 5 карт) и платно, в зависимости от тарифного плана.

Scribble Maps

Стоимость: бесплатно

GmapGIS

Стоимость: бесплатно

Heatmap Tool

Стоимость: бесплатно (с водяными знаками и ограничениями на количество объектов и просмотров) и платно в зависимости от тарифного плана.

MapTiler

Mapbox

Стоимость: имеются как бесплатный, так и платные тарифные планы