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

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

Для вставки интерактивной карты может использоваться конструктор карт
https://tech.yandex.ru/maps/tools/constructor/ :

В случае, если нам нужно более продвинутое использование карт (свои метки, программное перемещение карт и т.п.), то для этого надо использовать API Яндекс.Карт: https://tech.yandex.ru/maps/jsapi/ . В качестве примера использования карт в статье будет рассмотрено создание карты с простым добавлением пользовательских метки и балуна.

Для начала подключим компоненты API:

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

Карту необходимо будет расположить в каком-нибудь блоке, например в div#map . Далее карту необходимо создать в данном блоке (после срабатывания события готовности карты и DOM):

ymaps.ready (init) ; function init() { var myMap; myMap = new ymaps.Map ("map" , { center: [ 55.76 , 37.64 ] , zoom: 7 } ) ; }

Здесь мы указываем:

идентификатор блока «map» , где у нас будет создана карта;

center — центр карты с указанием ширины и долготы;

zoom — коэффициент масштаба карты.

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

из элементов карты присутствует только ползунок изменения масштаба;

карта не должна менять масштаб скроллом мыши.

Для выполнения этих требований дополняем код:

ymaps.ready (init) ; function init() { var myMap; myMap = new ymaps.Map ("map" , { center: [ 55.76 , 37.64 ] , zoom: 13 , controls: } ) ; myMap.behaviors .disable ("scrollZoom" ) ; myMap.controls .add ("zoomControl" , { position: { top: 15 , left: 15 } } ) ; }

Здесь мы отключили «scrollZoom» и добавили «zoomControl» с позиционированием от левого верхнего угла.

Теперь нужно добавить на карту метку, для статьи скачаём её картинку с http://medialoot.com/item/free-vector-map-location-pins/ и расположим в коде следующим образом:

ymaps.ready (init) ; function init() { var myMap; myMap = new ymaps.Map ("map" , { center: [ 55.7652 , 37.63836 ] , zoom: 17 , controls: } ) ; myMap.behaviors .disable ("scrollZoom" ) ; myMap.controls .add ("zoomControl" , { position: { top: 15 , left: 15 } } ) ; var myPlacemark = new ymaps.Placemark ([ 55.7649 , 37.63836 ] , { } , { iconLayout: "default#image" , iconImageHref: , iconImageSize: [ 40 , 51 ] , iconImageOffset: [ - 20 , - 47 ] } ) ; myMap.geoObjects .add (myPlacemark) ; }

Здесь мы объявляем переменную myPlacemark , в которой запишем маркер, в первом параметре ymaps.Placemark указываем координаты метки, а в третьем параметре:

указываем в iconLayout , что будет использоваться пользовательское изображение метки;

iconImageHref — путь к изображению;

iconImageSize — указываем размеры изображения;

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

И через myMap.geoObjects.add() добавляем метку на карту.

А теперь сделаем баллун, который у нас будет показываться при клике на метку карты, макет баллуна и его содержимое возьмём с http://designdeck.co.uk/a/1241

ymaps.ready (init) ; function init() { var myMap; myMap = new ymaps.Map ("map" , { center: [ 55.7652 , 37.63836 ] , zoom: 17 , controls: } ) ; myMap.behaviors .disable ("scrollZoom" ) ; myMap.controls .add ("zoomControl" , { position: { top: 15 , left: 15 } } ) ; var html = "" ; html += "" ; html += "" ; html += " The Victoria Tower Gardens " ; html += "" ; html += " City of London " ; html += "" ; html += " United Kingdom " ; html += " 020 7641 5264 " ; html += "" ; html += "" ; var myPlacemark = new ymaps.Placemark ([ 55.7649 , 37.63836 ] , { balloonContent: html } , { iconLayout: "default#image" , iconImageHref: "http://сайт/files/APIYaMaps1/min_marker.png" , iconImageSize: [ 40 , 51 ] , iconImageOffset: [ - 20 , - 47 ] , balloonLayout: "default#imageWithContent" , balloonContentSize: [ 289 , 151 ] , balloonImageHref: "http://сайт/files/APIYaMaps1/min_popup.png" , balloonImageOffset: [ - 144 , - 147 ] , balloonImageSize: [ 289 , 151 ] , balloonShadow: false } ) ; myMap.geoObjects .add (myPlacemark) ; }

Здесь мы:

в balloonContent указываем контент, который будет отображаться при открытии балуна;

balloonLayout — указываем, что в качестве макета баллуна будет использоваться пользовательское изображение;

balloonContentSize и balloonImageSize — размеры контента и изображения соответственно;

balloonImageHref — путь к изображению;

balloonImageOffset — смещение относительно левого верхнего угла;

balloonShadow — отключение тени у балуна (с пользовательскими изображениями ни на что не влияет).

Чтобы сайт искался на Яндекс.Картах, его нужно зарегистрировать в Яндекс.Справочнике .

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

адрес_из_конструктора " alt="название_компании "/>

Режим панорамы также можно добавить к себе на сайт Результат (содержимое можно вертеть, если захватить его участок мышкой, переходить по улицам щёлкая по стрелкам):

Советую посмотреть это видео для вдохновения:

Добавить карту на сайт: две картинки рядом (HTML / CSS)

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

Но я считаю так: пользователь ищет организацию и ему в первую очередь нужно узнать как до неё добраться. Поэтому лучше, если он увидит достаточного размера карту, чем мелкую карту и мелкое рядом стоящее фото здания. При уменьшении экрана максимально долго будет оставаться правая часть фонового изображения. А здесь левая: Если нужно, чтобы фотография перемещалась на новую строку, когда две картинки не умещаются вместе на текущей?
И последнее, вставка карты поверх фото. Описание картинки будет находиться либо справа от изображения с адресом фирмы, либо под ним.
Скульптура «Родина-мать зовёт!» Скульптура «Родина-мать зовёт!»

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

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

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

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

Размещение через Yandex APIВывод

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

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

Яндекс.Навигатор – описание

Яндекс.Навигатор – это прорыв в области навигационных приложений, который помогает водителям добраться с точки «А» в точку «В» за значительно меньший промежуток времени. Программа сама рассчитает, как вам лучше доехать до нужного места, а также примет во внимание пробки и дорожные события (ДТП и аварии), ремонт дорог и их перекрытие. Водителю всегда предлагается несколько вариантов (до трех) преодоления определенного отрезка пути, причем первым значится самый быстрый. В том случае, когда маршрут будет проходить по платной дороге, вас предупредят и об этом.

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

Внешний вид

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

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

Функции

Среди основных функций Яндекс.Навигатора выделяют следующие:

построение маршрутов на карте (более детально о том, как вбить координаты в Яндекс.Навигатор, мы расскажем чуть позже);

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

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

Как пользоваться программой

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

Как установить Яндекс.Навигатор

Прежде всего, следует отметить, что приложение может успешно работать только вместе с устройствами на базе iOS или Android. Это значит, что скачать Яндекс.Навигатор можно из AppStore или PlayMarket. После скачивания приложения и подтверждения всех разрешений, начнется установка.

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

Каких-то особенных настроек Яндекс.Навигатор не требует. Для определения местоположения применяется системный Location API, который, помимо спутников GPS, может работать и через базовые станции или Wi-Fi (функция активируется в настройках операционной системы). Как только вы установите приложение на свой смартфон, можете начинать пользоваться Яндекс.Навигатором.

Как настроить навигатор

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

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

1. Нажмите на нижнюю часть экрана;

2. Нажмите кнопку «Меню»;

3. В этом разделе выберите:

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

Настройки → Карты:

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

Кроме того, в настройках присутствуют и некоторые другие режимы:

3D-режим - включает объемное отображение карты.

Автомасштаб - помогает автоматически менять масштаб карты придвижении транспортного средства.

«Север всегда наверху» - фиксирует карту относительно сторон света.

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

Как проложить маршрут

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

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

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

Как пользоваться Яндекс.Навигатором без интернета

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

Какие устройства подойдут

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

Хорошо, что последнее обновление приложения уже частично позволяет пользоваться Яндекс Навигатором без Интернета, и владельцы устройств, работающих на базе Android или iOS (включая не только смартфоны, но и iPad"ы и Android-планшеты), получили возможность скачивания векторной карты интересующего региона в специальном разделе настроек. Новая версия Яндекс.Навигатора уже доступна для скачивания в AppStore и Google Play.

Как включить функцию

Чтобы активировать работу приложения без подключения к сети интернет, нужно:

1. Зайти в приложение Яндекс.Навигатор, установленное на используемое устройство (смартфон или планшет).

2. Перейти в раздел «Меню».

3. Нажать кнопку «Загрузка карт» и выбрать из списка доступных регионов, тот, который подходит именно вам (найти нужную местность можно как путем пролистывания списка, так и посредством поиска).

4. Выбрать один из возможных типов закачки: к примеру, «Обзорная» или «Полная».

Таким образом, вы можете скачать карты заранее (когда интернет есть), а использовать их в любом месте, пусть там и нет сети.

Обратите внимание! Если используемое вами устройство оснащено GPS-модулем, то вы сможете увидеть на схеме свое текущее местоположение и даже без навигации определить, куда именно вам направляться.

Рядом с типом карты всегда указывается размер скачиваемого файла, и нужно отметить, что иногда он бывает достаточно значительным. Именно поэтому лучше производить загрузку по Wi-Fi. При дальнейшем использовании можно будет просматривать карты без подключения к сети, хотя построение маршрута в дороге все же потребует выхода в интернет. То есть назвать такое решение полностью автономным нельзя. Скачанные векторные карты лишь уменьшают объем передаваемых данных, но даже это является существенным преимуществом, а в некоторых случаях оказывается настоящим спасением для водителей, оказавшихся в зоне без покрытия мобильных операторов.

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

Плюсы и минусы офлайн режима

Положительных моментов использования новой возможности несколько:

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

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

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

К сожалению, одними преимуществами дело здесь не ограничилось, и недостатки обновленной версии Яндекс.Навигатора также заметны. К наиболее существенным из них следует отнести невозможность построения маршрута без подключения к сети интернет. Однако, если вы заранее проложили маршрут при активном Интернете, то он сохранится на карте (наличие GPS-модуля позволит вам увидеть свое перемещение по карте). Также не стоит забывать, что при сворачивании с заданного маршрута новый прокладываться не будет.

В любом случае, как и на устройствах с операционной системой Android, пользоваться Яндекс Навигатором на iРhone – одно удовольствие, ведь путешествие с таким «помощником» проходит намного приятнее.

Подписывайтесь на наши ленты в

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

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

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

Ручное добавление карты

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

Заполните поле сайта (включая протокол «http://» и затем адрес домена), затем прочтите пользовательское соглашение и поставьте галочку, как на скрине выше. Как все сделаете, жмите на кнопку «Получить API-ключ». После этого вас начнет приветствовать надпись «Вы получили уникальный API-ключ…», а чуть ниже вы увидите длинный ключ и пример кода, который вам также понадобится.

Весь код нам не нужен, нужна лишь его часть, начиная с «