Отображение Яндекс карт в Битрикс

Довольно часто на сайтах клиентов требуется реализовать отображение Яндекс карт:

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

Итак, приступим:

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

Тип свойства — «Привязка к Яндекс. Карте». Как это выглядит со стороны контент-менеджера? А вот так:

Контент-менеджер вводит соответствующий адрес в поле «Поиск по карте» и получает координаты точки. Ага! Координаты у нас есть, а это значит, что можно воспользоваться API-шкой Яндекс. Карт. Заходим в их Песочницу и изучаем пример: https://tech.yandex.ru/maps/jsbox/2.1/placemark

Давайте реализуем отображение на основе него:

<!--подключаем яндекс карты-->
<script src="http://api-maps.yandex.ru/2.1/?lang=ru-RU" type="text/javascript"></script>
<?
$iblock_id = 1; // id инфоблока адресов
$contact_res_filter = array("IBLOCK_ID" => $iblock_id, "ACTIVE" => "Y");
$contact_res_select = array ("ID",
	"NAME",
	"PROPERTY_YMAP",
	);
$contact_res = CIBlockElement::GetList(Array('sort'=>'asc'), $contact_res_filter, false, false, $contact_res_select);
while ($contact_ob = $contact_res->GetNext()){
	?>
	<!--какая-то вёрстка отображения адресов, телефонов и прочего-->
	<?if ($contact_ob['PROPERTY_YMAP_VALUE']):?>
		<script>
			function init_<?=$contact_ob['ID']?>(){
				var myMap = new ymaps.Map("map_<?=$contact_ob['ID']?>", {
					center: [<?=$contact_ob['PROPERTY_YMAP_VALUE']?>],
					zoom: 10
				}, {
					searchControlProvider: 'yandex#search'
				});
				
				
				myMap.geoObjects.add(new ymaps.Placemark([<?=$contact_ob['PROPERTY_YMAP_VALUE']?>], {
					balloonContent: '<?=$contact_ob['NAME']?>'
				}, {
					preset: 'islands#dotIcon',
					iconColor: '#3b5998'
				}));
			}
			ymaps.ready(init_<?=$contact_ob['ID']?>);
		</script>    
		<div id = "map_<?=$contact_ob['ID']?>">
		</div>
	<?endif;?>
	<?
}
?>

Поясню код:

Каждая карта будет отображаться в div-нике с уникальным id-ником по шаблону map_<?=$contact_ob[‘ID’]?>

Перебирая в foreach-е элементы инфоблока с адресами мы пытаемся получить координаты из свойства PROPERTY_YMAP_VALUE. Если получилось их получить, то создаём функцию инициализации отображения Яндекс. Карты с названием по шаблону init_<?=$contact_ob[‘ID’]?>. Далее просто описываем необходимые данные: координаты центра карты, масштаб и т.д. и добавляем нашу «марку» на карту. В качестве подсказки использовано название элемента инфоблока адресов: <?=$contact_ob[‘NAME’]?>.

После этого подпихиваем эту функцию в ready и вуа-ля! Готово!