Вывод списка объектов Яндекс Карты

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<script src="https://yandex.st/jquery/2.2.3/jquery.min.js" type="text/javascript"></script>

<script>
// Группы объектов
var groups = [
        {
            name: "Памятники",
            style: "islands#redIcon",
            items: [
                {
                    center: [55.766266, 37.616552],
                    name: "Памятник 1"
                },
                {
                    center: [55.763187, 37.631413],
                    name: "Памятник 2"
                },
                {
                    center: [55.754757, 37.6419764],
                    name: "Памятник 3"
                }
            ]},
        {
            name: "Кафе",
            style: "islands#greenIcon",
            items: [
                {
                    center: [55.756726, 37.595783],
                    name: "Кафе 1"
                },
                {
                    center: [55.756069, 37.602408],
                    name: "Кафе 2"
                },
                {
                    center: [55.746174, 37.607242],
                    name: "Кафе 3"
                },
                {
                    center: [55.747638, 37.603303],
                    name: "Кафе 4"
                }
            ]},
        {
            name: "Музеи",
            style: "islands#orangeIcon",
            items: [
                {
                    center: [55.761925, 37.629980],
                    name: "Музей 1"
                },
                {
                    center: [55.764449, 37.605899],
                    name: "Музей 2"
                },
                {
                    center: [55.750062, 37.591039],
                    name: "Музей 3"
                }
            ]},
        {
            name: "Спорт",
            style: "islands#blueIcon",
            items: [
                {
                    center: [55.751526, 37.618164],
                    name: "Спорт 1"
                },
                {
                    center: [55.760310, 37.618343],
                    name: "Спорт 2"
                },
                {
                    center: [55.750062, 37.604556],
                    name: "Спорт 3"
                }
            ]}
    ];

</script>

<script>
ymaps.ready(init);
function init() {
    // Создание экземпляра карты.
    var myMap = new ymaps.Map('map', {
            center: [50.443705, 30.530946],
            zoom: 14
        }, {
            searchControlProvider: 'yandex#search'
        }),
        // Контейнер для меню.
        menu = $('<ul class="menu"></ul>');

    for (var i = 0, l = groups.length; i < l; i++) {
        createMenuGroup(groups[i]);
    }

    function createMenuGroup (group) {
        // Пункт меню.
        var menuItem = $('<li><a href="#">' + group.name + '</a></li>'),
        // Коллекция для геообъектов группы.
            collection = new ymaps.GeoObjectCollection(null, { preset: group.style }),
        // Контейнер для подменю.
            submenu = $('<ul class="submenu"></ul>');

        // Добавляем коллекцию на карту.
        myMap.geoObjects.add(collection);
        // Добавляем подменю.
        menuItem
            .append(submenu)
            // Добавляем пункт в меню.
            .appendTo(menu)
            // По клику удаляем/добавляем коллекцию на карту и скрываем/отображаем подменю.
            .find('a')
            .bind('click', function () {
                if (collection.getParent()) {
                    myMap.geoObjects.remove(collection);
                    submenu.hide();
                } else {
                    myMap.geoObjects.add(collection);
                    submenu.show();
                }
            });
        for (var j = 0, m = group.items.length; j < m; j++) {
            createSubMenu(group.items[j], collection, submenu);
        }
    }

    function createSubMenu (item, collection, submenu) {
        // Пункт подменю.
        var submenuItem = $('<li><a href="#">' + item.name + '</a></li>'),
        // Создаем метку.
            placemark = new ymaps.Placemark(item.center, { balloonContent: item.name });

        // Добавляем метку в коллекцию.
        collection.add(placemark);
        // Добавляем пункт в подменю.
        submenuItem
            .appendTo(submenu)
            // При клике по пункту подменю открываем/закрываем баллун у метки.
            .find('a')
            .bind('click', function () {
                if (!placemark.balloon.isOpen()) {
                    placemark.balloon.open();
                } else {
                    placemark.balloon.close();
                }
                return false;
            });
    }

    // Добавляем меню в тэг cont.
    menu.appendTo($('.cont'));
    // Выставляем масштаб карты чтобы были видны все группы.
    myMap.setBounds(myMap.geoObjects.getBounds());
}
</script>

<style type="text/css">
    #map {
        width: 100%;
        height: 400px;
    }
        /* Оформление меню (начало)*/
    .menu {
        list-style: none;
        padding: 5px;
        margin: 0;
    }
    .submenu {
        list-style: none;
        margin: 0 0 0 20px;
        padding: 0;
    }
    .submenu li {
        font-size: 90%;
    }
        /* Оформление меню (конец)*/
</style>

<div id="map"></div>
<div class="cont mt-4"></div>

Рабочий пример