заявка на сайт
Евгений Самусько
Старший веб-разработчик
Поделиться

Возможности сервиса Яндекс.Карты для вашего сайта

1862

Яндекс.Карты — это удобный инструмент от компании Яндекс, который помогает решить на вашем сайте множество различных задач.
Например, для создания схемы проезда к вашему магазину или офису используется сервис Конструктор карт. С его помощью достаточно ввести необходимый адрес, установить метки, и сервис выдаст 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();       });
			

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


Наверх