JSFiddle - React, Tailwind, and code Playground

by Alex Alex

HTML

<div id="map"></div>

CSS

</style>
<script type="text/javascript" src="https://yandex.st/jquery/1.9.0/jquery.min.js"></script>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></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; }

JavaScript

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.balloonContentBody
                 );});
        
        var objectManager = new ymaps.ObjectManager({
            clusterize: true,
            clusterDisableClickZoom: true,
            clusterOpenBalloonOnClick: true,
            // Устанавливаем режим открытия балуна. 
            // В данном примере балун никогда не будет открываться в режиме панели.
            clusterBalloonPanelMaxMapArea: 0,
            // По умолчанию опции балуна balloonMaxWidth и balloonMaxHeight не установлены для кластеризатора,
            // так как все стандартные макеты имеют определенные размеры.
            clusterBalloonMaxHeight: 200,
            // Устанавливаем собственный макет контента балуна.
            clusterBalloonContentLayout: customBalloonContentLayout
        });
        
        // Заполняем кластер геообъектами со случайными позициями.
        for...