How to make a window pop up with the names of child labels when clicking on a cluster?

Question

Yandex maps

I have a yandex card. There are several markers on it (with different names), when the map is moved away, some markers are combined into a cluster.
I need that when clicking on a cluster - a balloon pops up with a list of elements "name + icon" of these labels:
- icon1 + name 1
- icon2 + name 2
.................. ......................

ymaps.ready(init);
        var myMap;

        // массив с метками
        var myCollection = [];

        // Инициализация карты
        function init() {

            myMap = new ymaps.Map("map-category", {
                    center: [44.496141, 34.162030],
                    zoom: 10,
                    controls: []
                },
                {}),

                clusterer = new ymaps.Clusterer({
                    clusterIcons: [
                    {
                        href: 'images/icons/cluster.svg',
                        size: [32, 32],
                        offset: [-16, -32]
                    }]
                });

            // 1 метка
            myPlacemark1 = new ymaps.Placemark(
                [44.496141, 34.162030], {
                    hintContent: 'Название 1',
                    balloonContent:
                    '<div class="event">' +
                           Название 1
                    '</div>' +
                },
                {
                    // Иконка маркера
                    iconLayout: 'default#image',
                    iconImageHref: 'images/icons/marker-full.svg',
                    iconImageSize: [22, 30],
                    iconImageOffset: [-11, -30],

                    // Балун
                    balloonImageSize: [497, 183],
                    balloonMinWidth: 497,
                    balloonOffset: [35, -40],
                    balloonAutoPanCheckZoomRange: false,
                    clusterDisableClickZoom: true,
                    hideIconOnBalloonOpen: false
                }
            );

            // 2 метка
            myPlacemark1 = new ymaps.Placemark(
                [44.496141, 34.162030], {
                    hintContent: 'Название 2',
                    balloonContent:
                    '<div class="event">' +
                           Название 1
                    '</div>' +
                },
                {
                    // Иконка маркера
                    iconLayout: 'default#image',
                    iconImageHref: 'images/icons/marker-full.svg',
                    iconImageSize: [22, 30],
                    iconImageOffset: [-11, -30],

                    // Балун
                    balloonImageSize: [497, 183],
                    balloonMinWidth: 497,
                    balloonOffset: [35, -40],
                    balloonAutoPanCheckZoomRange: false,
                    clusterDisableClickZoom: true,
                    hideIconOnBalloonOpen: false
                }
            );

            myMap.geoObjects.add(myPlacemark1);
            myMap.geoObjects.add(myPlacemark2);

            myCollection.push(myPlacemark1, myPlacemark2);

            clusterer.add(myCollection);
            myMap.geoObjects.add(clusterer);

Answer 1

Intercept the click event on the cluster, form a balloon for display.