Например, для создания схемы проезда к вашему магазину или офису используется сервис Конструктор карт. С его помощью достаточно ввести необходимый адрес, установить метки, и сервис выдаст js-код, который просто нужно вставить в требуемое место на странице.
Помимо этого, существует множество модулей для популярных CMS-систем управления контентом — 1С-Битрикс, Drupal, Joomla, MODX, WordPress и др. Еще один способ добавить карту на сайт — использование API Яндекс.Карты.
Карта без проблем впишется в дизайн практически любого сайта — при создании также можно настраивать различные параметры — масштаб, размер, вид меток, центр.
Так, для мобильной версии сайта Крайинвестбанка был реализован собственный вид меток.
Для создания собственной метки для карты достаточно указать подобный код при ее создании.
Код
options:{ iconImageHref: '/img/contacts_marker.png', iconImageOffet: [-28,-31], iconImageSize:[24,28] } |
Практически на любом современном коммерческом сайте используются те или иные сервисы для построения маршрутов и схем проезда.
Так, нами недавно был разработан новый сайт для Крайинвестбанка, где активно использовался API сервиса Яндекс.Карты.
Было необходимо решить 2 основные задачи для вывода на карте всех подразделений Краснодарского Края и Крыма:
1) Вывод всех объектов на карте.
2) Реализация сервиса «найти ближайший», который позволяет по заданному адресу найти ближайшее подразделение.
Вывод всех объектов на карту был реализован при использовании функции geoQuery и инфоблок, содержащий информацию о всех отделениях и их координаты.
Код
offices = ymaps.geoQuery({ type: 'OfficesCollection', features: [ { type: 'Office', properties: { balloonContent: 'Дополнительный офис ОАО «Крайинвестбанк» в г. Абакан<br> <p>Адрес: г. Абакан, ул. Межнациональная, 75</p> <p>Телефон: (86780) 4-56-24 4-63-20</p> <a href="/banking-network/offices/dopolnitelnyy-ofis-oao-krayinvestbank-v-g-abinske/">Подробнее</a>' }, geometry: { type: 'Point', coordinates: [44.865490, 38.151894] } }, type: 'Office', properties: { balloonContent: 'Дополнительный офис Филиала «Крым» ОАО «Крайинвестбанк» в г. Евпатория<br> <p>Адрес: Ялта ул. Вишневая, 109</p><p>Телефон: +38 (0657)-94-81-60, +38 (0656)-94-67-61</p> <a href="/banking-network/offices/dopolnitelnyy-ofis-filiala-krym-oao-krayinvestbank-v-g-evpatorii/">Подробнее</a>' }, geometry: { type: 'Point', coordinates: [45.199476, 33.354425] } }, …...... } ] }).addToMap(myMap); |
Таким образом, на карте отобразились все метки подразделений, которые были заданы в соответствующем инфоблоке.
Для отображения на карте ближайшего отделения по адресу, введенному пользователем, использовались функции geoQuery, geocode и getClosesTo.
Сначала при помощи функции geoQuery и geocode определяем координаты введенного адреса в переменной adress
Код
find = ymaps.geoQuery(ymaps.geocode(adress, {kind: 'house'})) |
Затем используя, функцию getClosesTo, ищем в выше созданном объекте со всеми отделениями (offices) отделение с ближайшими координатами.
Код
offices.getClosestTo(find.get(0)).balloon.open(); |
Из-за того что источник данных асинхронный, необходимо дождаться обработки результата. Для этого добавляется функция then. Весь код имеет вид:
Код
find = ymaps.geoQuery(ymaps.geocode(adress, {kind: 'house'})).then(function() { offices.getClosestTo(find.get(0)).balloon.open(); }); |
Помимо этого, портал Яндекс.Карты обладает множеством других полезных сервисов — отображение пробок, создание маршрутов, активных областей, реализация собственных карт, которые позволяют реализовать практически любой функционал, связанный с картами на вашем сайте.