JSFiddle - React, Tailwind, and code Playground

HTML

<script src="C:\WebServers\home\inet\www\groups.js"></script>
<html>
<head>
    
    <script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
    <script src="//yandex.st/jquery/1.6.4/jquery.min.js" type="text/javascript"></script
</head>

<body>
<div id="map" style="width:1200px; height:700px"></div>
</body>

</html>

CSS

html, body, #map {
            width: 100%; padding: 0; margin: 0;
            font-family: Arial;
        }

        #map {
            height: 250px;
        }
            /* Оформление меню (начало)*/
        .menu {
            list-style: none;
            padding: 5px;

            margin: -700px 0 0 1300px;
        }
        .submenu {
            list-style: none;

            margin: 0 0 0 20px;
            padding: 0;
        }
        .submenu li {
            font-size: 90%;
        }

JavaScript

ymaps.ready(init);

function init() {

    // Создание экземпляра карты.
    var myMap = new ymaps.Map('map', {
            center: [53.71, 106.83], // Байкал
            zoom: 6,
			controls: ['largeMapDefaultSet','routeEditor']
        });
    //Добавляем элементы управления	
			
	// Контейнер для меню.
        menu = $('<ul class="menu"/>');
		
		

    // Перебираем все группы.
    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"/>');

        // Добавляем коллекцию на карту.
        myMap.geoObjects.add(collection);
		
		
        // Добавляем подменю.
        menuItem
            .append(submenu)
            // Добавляем пункт в меню.
            .appendTo(menu)
            // По клику удаляем/добавляем коллекцию на карту и скрываем/отображаем подменю.
            .find('a')
            .toggle(function () {
                myMap.geoObjects.remove(collection);
                submenu.hide();
            }, function () {
                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.balloonContent },
			{
				
			iconLayout: 'default#image',// ЭТИ 2 СТРОЧКИ Я ВПИСАЛ, В НАДЕЖДЕ ЧТО МЕТКИ ИЗМЕНЮТСЯ НА...