JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="ymap" class="map-cords"></div>
CSS
.map-cords {
width: 100%;
height: 500px;
}
JavaScript
ymaps.ready(function() {
var myMap = new ymaps.Map('ymap', {
center: [45.05228236533425, 38.97024862704458],
controls: [
'typeSelector',
'zoomControl'
],
zoom: 12
});
// Создадим массив геообъектов.
myGeoObjects = [];
for (var i = 0; i < 100; i++) {
myGeoObjects.push(new ymaps.GeoObject({
geometry: {
type: "Point",
coordinates: [45.085468, 39.011003]
},
properties: {
clusterCaption: 'Геообъект №1',
balloonContentBody: 'Содержимое балуна геообъекта №1.'
}
}, {
preset: 'islands#darkOrangeHomeIcon'
}));
myGeoObjects.push(new ymaps.GeoObject({
geometry: {
type: "Point",
coordinates: [45.089541, 39.010805]
},
properties: {
clusterCaption: 'Геообъект №2',
balloonContentBody: 'Содержимое балуна геообъекта №2.'
}
}, {
preset: 'islands#darkOrangeHomeIcon'
}));
myGeoObjects.push(new ymaps.GeoObject({
geometry: {
type: "Point",
coordinates: [45.086715, 39.008407]
},
properties: {
clusterCaption: 'Геообъект №3',
balloonContentBody: 'Содержимое балуна геообъекта №3.'
}
}, {
preset: 'islands#darkOrangeHomeIcon'
}));
};
// Создадим кластеризатор и запретим приближать карту при клике на кластеры.
var clusterer = new ymaps.Clusterer({
preset: 'islands#invertedDarkOrangeClusterIcons',
groupByCoordinates: false,
clusterDisableClickZoom: true,
clusterHideIconOnBalloonOpen: false,
geoObjectHideIconOnBalloonOpen: false
});
clusterer.add(myGeoObjects);
myMap.geoObjects.add(clusterer);
// Спозиционируем карту так, чтобы на ней были видны все объекты.
myMap.setBounds(clusterer.getBounds(), {
checkZoomRange: true
});
});