JSFiddle - React, Tailwind, and code Playground

by Sobi1214

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[i] = new ymaps.GeoObject({
        geometry: {
          type: "Point",
          coordinates: [45.085468, 39.011003]
        },
        properties: {
          clusterCaption: 'Геообъект №1',
          balloonContentBody: 'Содержимое балуна геообъекта №1.'
        }
      }, {
        preset: 'islands#darkOrangeHomeIcon'
      });

    myGeoObjects[i] = new ymaps.GeoObject({
      geometry: {
        type: "Point",
        coordinates: [45.089541, 39.010805]
      },
      properties: {
        clusterCaption: 'Геообъект №2',
        balloonContentBody: 'Содержимое балуна геообъекта №2.'
      }
    }, {
      preset: 'islands#darkOrangeHomeIcon'
    });

  myGeoObjects[i] = 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
});
});