Битрикс. Отображаем список наших магазинов с помощью компоненты Яндекс.Карты

Задача: есть список дилерских магазинов определённого вендора. Координаты каждого магазина известны. Надо отобразить эти магазины на карте с помощью компоненты Яндекс.Карты.
В общем, сделать красиво, а не просто список городов и магазинов в них.

Сегодня учимся использовать Яндекс.Карты, добавлять на неё несколько меток, а также понимаем, что Битрикс ещё не идеален =)

Мы хотим получить нечто вроде вот такого:


Первый шаг.
Добавляем на страницу компоненту. Компоненты -- Контент -- Яндекс.Карты -- Яндекс.Карты: настраиваемая карта

Второй шаг.
Копируем шаблон компоненты, назовём его shops. Я копирую обычно в дефолтовый шаблон /bitrix/templates/.default/components/bitrix/map.yandex.view/shops

Третий шаг.
Идём в папку скопированного шаблона, создаём файл result_modifier.php
У меня географические координаты магазина хранятся в свойстве COORDINATES типа Привязка к Яндекс.Карте. В файле result_modifier.php мы получаем список координат и имена магазинов, которые будем отображать на карте. При гетлисте получаем координату типа 53.717603,91.452242, которую парсим и распихиваем по свойствам массива. Смотрим в код:

$hShopz = CIBlockElement::GetList(array(), array('IBLOCK_ID'=>$IBLOCK_ADDRESS_ID, 'ACTIVE'=>'Y'), false, false, array('ID', 'NAME', 'PROPERTY_COORDINATES'));
while($row = $hShopz->Fetch())
{
 $arTmp = explode(',', $row['PROPERTY_COORDINATES_VALUE']);
 $arResult['POSITION']['PLACEMARKS'][] = array(
  'LON' => $arTmp[1],
  'LAT' => $arTmp[0],
  'TEXT' => $row['NAME'],
 );
}

Компонента автоматически подхватывает добавленные нами в arResult свойства и размещает метки на карте. Да вот незадача, названия магазинов на метках не отображаются.

Четвёртый шаг.
Лезем в документацию Яндекса, дабы раскусить, почему не растёт кокос. Оказывается, нам надо передавать ещё немного настроек для того, чтобы метки работали, как нам это надо. Благо, шаблон компоненты Яндекс.Карты скопировался вместе с script.js, так что мы можем его редактировать как угодно в своих целях.
Сначала находим строку

var props = {};

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

var preset = {};

Теперь исправляем основные настройки. Я делаю под себя, мне не нравятся выпадающие хинты, я их комментирую.

//props.balloonContent = arPlacemark.TEXT.replace(/\n/g, '<br />');
//props.hintContent = value_view;
props.iconContent = value_view; //добавляю свойство "Подпись метки"

preset.preset = 'twirl#blueStretchyIcon'; //округлая, синяя, подстраивающаяся под контент
preset.draggable = false; //запрещаем её двигать

И, наконец, передаём настройки в функцию, которая будет формировать текущую метку.

var obPlacemark = new ymaps.Placemark(
 [arPlacemark.LAT, arPlacemark.LON],
 props,
 preset
);

Сохраняем изменения, обновляем кеш компонентов. Радуемся =)