Географические карты графический редактор онлайн. Как создавать свои карты в Google Maps

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

  • построить маршрут
  • измерить расстояние
  • оценить масштаб
  • увидеть любую улицу глазами прохожего
  • узнать информацию о реальном объекте
  • определить местоположение (как своё, так и других)
  • определить и сравнить характеристики регионов

Карты от Google и Яндекса

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

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

О том, как это сделать, можно прочитать тут:
- Google Maps API
- API Карт Яндекса

2. 2ГИС специализируется на точных данных об организациях, которые можно найти на карте. Изучите инструкцию , чтобы узнать как можно использовать виджет 2GIS на своём сайте. Если вы хотите заявить о себе через данный сервис, попробуйте 2ГИС для бизнеса с набором инструментов для продвижения. Полезная функция: можно встроить карту, которая покажет в указанном регионе заведения, отсортированные по категориям.

3. ZeeMaps предлагает инструменты для добавления больших объёмов информации и её анализа на карте. , чтобы понять, как кастомизировать карту и добавить на неё новые слои и элементы.

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

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

6. Scribble Maps отличает возможность выгружать карты в самых разных форматах.

7. Сервис, который позволяет создавать из карт целые истории - StoryMap JS . Составьте маршрут и добавьте текст, фото или видео к каждой точке на карте. К примеру, в этом проекте можно узнать, как двигался олимпийский факел во время сочинской эстафеты.

Можно использовать свои карты или фотографии, загрузив их в формате изображения и расставив на них точки с описаниями. Удобная функция StoryMap JS : сервис может автоматически собрать карту из 20 последних фотографий в Instagram. Вам останется лишь отредактировать её, если необходимо.

8. Похожей функцией может похвастаться Tripline . Помимо Инстаграма, он интегрируется с Foursquare, Flickr, Twitter, Facebook и другими сервисами.

9. Историческая карта от GeaCron может пригодиться для проекта по истории.

10 и 11. Если вы рассказываете о погоде, то смело встраивайте Windyty - красивый погодный глобус с неплохим набором инструментов. Для профессионалов отрасли есть также

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

Сейчас у многих имеются устройства, так или иначе оснащённые спутниковой 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:

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

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

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

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

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

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

Итак, начинаем создавать интерактивную карту.

Шаг первый . Вставляем основную карту. В приведенном ниже примере это будет карта России.

Внимание! Для интерактивной карты целесообразнее настраивать не объект, а целый слайд. Поэтому целесообразно выполнить следующий шаг по смене слайдов.

Шаг второй. В главном меню выполняем следующий алгоритм: Анимация – Смена слайдов . В смене слайдов находим режим «прямоугольник наружу» . С ним эффект смены карт наиболее рационален. В «Смене слайдов » убираем также галочки с режимов «по щелчку» и «автоматически». Это касается всех слайдов нашей разработки.

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

Алгоритм выполнения следующий: Вставка – Фигуры – Полилиния (можно и Рисованная кривая ).

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

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

Когда на экране у вас появится выделенная область, независимо от полученного цвета заливки настраиваем формат полученного рисунка на 100%-ную прозрачность. Таким образом, объект гиперссылки невидим, внешне наша карта ничем не отличается от обычной. Но между тем, все выделенные нами регионы являются гиперссылками.

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

Шаг пятый . Каждый из выделенных объектов делаем гиперссылками на соответствующие карты. Рекомендуемое действие гиперссылки «по наведению указателя мыши». В таком режиме наиболее эффективна работа интерактивной карты.

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

При необходимости можем продолжить углубление содержания, то есть от карты региона перейти к карте города (населённого пункта). Отсюда – к отдельным объектам. Например, показать вид школы из космоса. Или перейти по гиперссылке к фото отдельных объектов.

Шаг шестой . Не забываем на всех картах разместить «кнопки возврата» и на главную карту, и на карту, например, региона. То есть на остальных картах может быть несколько кнопок возврата: например, одна кнопка — с населенного пункта на карту региона, другая – на карту России.

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

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

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

Интерактивные карты могут быть использованы и в дидактических играх-путешествиях по виртуальным, вымышленным странам. В таком случае необходимо красочно прорисовать необходимые зоны, объекты. Однако здесь могут быть другие проблемы с гиперссылками.

Если на такой карте вы рисовали какие-то символы, делали надписи и т.п., то группировка их в один объект (область какой-то страны например) не поможет вам сделать его гиперссылкой. Вряд ли уместно давать гиперссылку на отдельные элементы. Тут вновь может помочь гиперссылка на основе невидимой автофигуры.

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

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

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

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

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

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

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

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

    Если у вас нет аккаунта в Яндексе, то надо будет его завести, так как без этого сконструировать ничего не получится, сервис попросит вас залогиниться или пройти регистрацию. Пугаться не нужно, регистрация – это создание почтового ящика на 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 месяцев назад). Если у вас есть желание поиграть в плагины, то их найдете в репозитории Вордпресс поиском, а как устанавливать плагины .

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

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

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

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

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

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

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

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

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

    Шаг 1. Начальная настройка Яндекс карты для сайта:
    • Откройте страницу конструктора Яндекс.Карт для сайта .
    • Найдите на карте необходимое географическое место по адресу или вручную (с помощью масштабирования ползунком и перемещения карты мышью).
    • Выберите удобный для работы масштаб. Окончательный масштаб лучше установить в конце работы. Рисовать будем метки на карте, линии (подъездные пути) и контуры зданий или территорий.
    • Укажите в соответствующем поле название будущей карте.
    • Перейдем к инструментарию сервиса: кнопки для рисования точек (меток на карте), линий, многоугольников (контуров) и размеров карты.
    Шаг 2. Рисование на карте точек (меток):
    • Кликаем по кнопке рисования точек.
    • Ставим метку (точку) в нужном нам месте. Например, на здании вашего офиса. Карта для сайта от Яндекса позволяет вставить не одну, а несколько меток (к примеру, если у вас несколько магазинов, складов или офисов).
    • Переходим к настройке свойств установленной метки (вставка текста, выбор цвета и т.п.).
    Шаг 3. Настройка свойств установленной на карте метки:
    • Кликаем непосредственно по нарисованной нами метке.
    • В открывшемся окошке выбираем нужные нам свойства (цвет, номер метки на карте), пишем по желанию текст (в последствии текст будет виден пользователю при клике по метке).
    • Любую метку можно удалить в соответствующем окошке свойств.
    • Итак мы вставили на Яндекс-карте для сайта метку вашего офиса, настроили её свойства, теперь переходим к рисованию линий. К примеру, линии подъездного пути к офису.
    Шаг 4. Рисование линий на карте:
    • Кликаем по кнопке рисования линий.
    • Кликая по карте, мы получаем ломаную линию любой траектории. Ею можно оконтурить любой обект или прочертить маршрут подъезда к объекту.
    • Передвигая квадратные и круглые маркеры, можно редактировать форму линии.
    • По аналогии с метками, если кликнуть по линии, появится окно свойств, в котором можно установить цвет, толщину, прозрачность линии, а так же внести текст, который будет показываться пользователю.
    • Переходим теперь к рисованию многоугольников.
    Шаг 5. Рисование многоугольников, заполненных цветом контуров:
    • Кликаем по кнопке рисования многоугольников.
    • В отличии от линий, которыми можно так же очертить любой многоугольник, данные многоугольники являются контурами с залитой цветом серединой.
    • Кликая мышкой по карте можно нарисовать любой заполненный многоугольник. Методика рисования, редактирования и установка свойств аналогична методике рисования линий.
    • Переходим теперь к изменению размеров карты.
    Шаг 6. Изменение размеров карты для сайта:
    • Кликаем по кнопке изменения размеров.
    • Перемещая квадратные маркеры по контуру карты, можно изменить размер до необходимого. Всё просто.
    • Переходим к финалу создания карты.
    Шаг 7. Получение кода карты для сайта (Яндекс):
    • Придаем карте окончательный вид, установив финальный масштаб карты и окончательную позицию (координаты).
    • На этом этапе создание карты для сайта (Яндекс) можно считать законченным. Нажимаем на большую желтую кнопку "Сохранить и получить код".
    • Даже после сохранения карты всегда можно вернуться к редактированию.
    • Обратите внимание на то, что карта может быть не только схемой, но и фотоснимком из космоса, гибридом или элементом "Народной карты".
    • Кроме того, вы вольны сделать карту интерактивной или простым изображением. Интерактивная карта интересней, функциональней, но может загружаться дольше простого изображения. Выбор за вами.
    • Вставить карту Яндекса на сайт можно, разместив html-код карты в нужном вам месте страницы.

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

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

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

    Поделиться: