Собственный макет балуна кластера

Open in CodeSandbox

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

В макете происходит перечисление и вывод полей 'placemarkId' и 'balloonContentHeader' всех геообъектов кластера при помощи конструкции 'for'. 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <html>
        <head>
            <title>Собственный макет балуна кластера</title>
            <meta
                http-equiv="Content-Type"
                content="text/html; charset=UTF-8"
            />
            <script
                src="https://yandex.st/jquery/2.2.3/jquery.min.js"
                type="text/javascript"
            ></script>
            <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
            <script
                src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>"
                type="text/javascript"
            ></script>
            <script
                src="cluster_custom_balloon_content_layout.js"
                type="text/javascript"
            ></script>
            <style>
                html,
                body {
                    margin: 0;
                    padding: 0;
                }
                html,
                body,
                #map {
                    width: 100%;
                    height: 100%;
                }

                .list {
                    list-style: none outside;
                    margin: 0;
                    padding: 0;
                }
                .list li {
                    padding-bottom: 10px;
                }
                .list a {
                    color: #207697;
                }
                .list a:hover {
                    color: #28b8f0;
                    text-decoration: none;
                }
            </style>
        </head>
        <body>
            <div id="map"></div>
        </body>
    </html>
</html>

jQuery(function () {
    ymaps.ready(function () {
        var mapCenter = [55.755381, 37.619044],
            map = new ymaps.Map("map", {
                center: mapCenter,
                zoom: 10,
                controls: [],
            }),
            placemarks = [];

        // Создаем собственный макет с информацией о выбранном геообъекте.
        var customBalloonContentLayout =
            ymaps.templateLayoutFactory.createClass(
                [
                    "<ul class=list>",
                    // Выводим в цикле список всех геообъектов.
                    "{% for geoObject in properties.geoObjects %}",
                    '<li><a href=# data-placemarkid="{{ geoObject.properties.placemarkId }}" class="list_item">{{ geoObject.properties.balloonContentHeader|raw }}</a></li>',
                    "{% endfor %}",
                    "</ul>",
                ].join("")
            );

        jQuery(document).on("click", "a.list_item", function () {
            // Определяем по какой метке произошло событие.
            var selectedPlacemark =
                placemarks[jQuery(this).data().placemarkid];
            alert(selectedPlacemark.properties.get("balloonContentBody"));
        });

        var clusterer = new ymaps.Clusterer({
            clusterDisableClickZoom: true,
            clusterOpenBalloonOnClick: true,
            // Устанавливаем режим открытия балуна.
            // В данном примере балун никогда не будет открываться в режиме панели.
            clusterBalloonPanelMaxMapArea: 0,
            // По умолчанию опции балуна balloonMaxWidth и balloonMaxHeight не установлены для кластеризатора,
            // так как все стандартные макеты имеют определенные размеры.
            clusterBalloonMaxHeight: 200,
            // Устанавливаем собственный макет контента балуна.
            clusterBalloonContentLayout: customBalloonContentLayout,
        });

        // Заполняем кластер геообъектами со случайными позициями.
        for (var i = 0, l = 100; i < l; i++) {
            var placemark = new ymaps.Placemark(getRandomPosition(), {
                // Устаналиваем данные, которые будут отображаться в балуне.
                balloonContentHeader: "Заголовок метки №" + (i + 1),
                balloonContentBody: "Информация о метке №" + (i + 1),
                placemarkId: i,
            });
            placemarks.push(placemark);
        }

        clusterer.add(placemarks);
        map.geoObjects.add(clusterer);

        function getRandomPosition() {
            return [
                mapCenter[0] + (Math.random() * 0.3 - 0.15),
                mapCenter[1] + (Math.random() * 0.5 - 0.25),
            ];
        }
        clusterer.balloon.open(clusterer.getClusters()[0]);
    });
});