JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="map"/>
CSS
#map {
width: 640px;
height: 480px;
}
JavaScript
jQuery(function () {
var dateFilter = function (data, dateString, filterValue) {
var months = [
'january', 'february', 'march', 'april',
'may', 'june', 'july', 'august',
'september', 'october', 'november', 'december'
],
date = dateString.split('.');
date[1] = months[parseInt(date[1], 10)];
return date.join(' ');
};
ymaps.ready(function () {
var mapCenter = [55.755381, 37.619044],
map = new ymaps.Map('map', {
center: mapCenter,
zoom: 10,
controls: []
}),
placemarks = [];
ymaps.template.filtersStorage.add('date', dateFilter);
// Создаем собственный макет с информацией о выбранном геообъекте.
var customBalloonContentLayout = ymaps.templateLayoutFactory.createClass([
'{{ "21.10.2014"|date }}',
'<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,
...