JSFiddle - React, Tailwind, and code Playground
HTML
<div id="map"></div>
CSS
</style>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru-RU"></script>
<script type="text/javascript" src="https://yandex.st/jquery/2.1.0/jquery.min.js"></script>
<style>
html, body, #map {
width: 100%; height: 100%; padding: 0; margin: 0;
}
JavaScript
ymaps.ready(init);
function init () {
var myMap = new ymaps.Map('map', {
center: [55.76, 37.64],
zoom: 10
}, {
searchControlProvider: 'yandex#search',
maxZoom: 10
}),
objectManager = new ymaps.ObjectManager({
// Чтобы метки начали кластеризоваться, выставляем опцию.
clusterize: true,
geoObjectOpenBalloonOnClick: false
});
myMap.geoObjects.add(objectManager);
$.ajax({
url: "https://sandbox.api.maps.yandex.net/examples/ru/2.1/object_manager_events/data.json"
}).done(function(data) {
data.features.forEach(function (feature) {
feature.properties.balloonContent = '<span id="balloon-content-' + feature.id + '">ждите…</span>';
})
objectManager.add(data);
});
var monitor;
function onClusterBalloonOpen (e) {
//Получаем activeObject из события кластера
var target = e.get('target').getOwner(),
activeObject = target.state.get('activeObject');
if (monitor) {
monitor.removeAll();
}
monitor = new ymaps.Monitor(target.state);
monitor.add(['activeObject'], changeActiveObject);
changeActiveObject({
activeObject: activeObject
});
}
function changeActiveObject (data) {
var id = data.activeObject.id;
// Грузим данные по id
setTimeout(function () {
document.getElementById('balloon-content-' + id)
.innerHTML = 'Контент загрузился'
}, 1000);
}
objectManager.events
.add('balloonopen', onClusterBalloonOpen)
.add('balloonclose', function () {
if (monitor) {
monitor.removeAll();
}
});
}