JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<script type="text/javascript" src=""></script>
<div id="map"></div>

CSS

html, body, #map {
 width: 100%; height: 100%; padding: 0; margin: 0;
}

JavaScript

var icon_url = "http://realty-elit.ru/components/com_osproperty/images/assets/googlemapicons/1.png";

ymaps.ready(function() {
    var mapCenter = ['44.59905921452486', '33.84991499934473'],
        myMap = new ymaps.Map('map_canvas', {
            center: mapCenter,
            zoom: 9,
            controls: ['smallMapDefaultSet']
        });

    var placemarks = [];

    var customItemContentLayout = ymaps.templateLayoutFactory.createClass([
        '<div>',
        '<h2 class=ballon_header>{{ properties.balloonContentHeader|raw }}</h2>',
        '<div class=ballon_body>{{ properties.balloonContentBody|raw }}</div>',
        '<div class=ballon_footer>{{ properties.balloonContentFooter|raw }}</div>',
        '</div>'
    ].join(''));

    var clusterer = new ymaps.Clusterer({
        clusterDisableClickZoom: true,
        clusterOpenBalloonOnClick: true,
        clusterBalloonPanelMaxMapArea: 0,
        clusterBalloonContentLayoutWidth: 500,
        clusterBalloonContentLayoutHeight: 300,
        clusterBalloonItemContentLayout: customItemContentLayout,
        clusterBalloonLeftColumnWidth: 120
    });


    var placemark0 = new ymaps.Placemark([44.61466, 33.63802], {
        balloonContentHeader: 'Участок в бухте Казачьей 4,6 соток',
        balloonContentBody: '<a href="/component/osproperty/uchastok-v-bukhte-kazachej-4-6-sotok"><img class="ya_maps_baloon_img" src="http://realty-elit.ru/images/osproperty/properties/62/thumb/621436352180b0e34c0a27aeed3cc8e4899bf4918e9a.jpg" alt="" /></a> <p class="ya_maps_baloon_a"> <p class="ya_maps_baloon_p">4,6 соток</p> <a href="/component/osproperty/uchastok-v-bukhte-kazachej-4-6-sotok">Подробнее...</a></p>'
    }, {
        iconLayout: "default#image",
        iconImageHref: icon_url,
        iconImageSize: [33, 44],
        iconColor: '#FF1F1F'
    });
    placemarks.push(placemark0);


    var placemark1 = new ymaps.Placemark([44.61466, 33.63802], {
        balloonContentHeader: 'Участок в бухте Казачьей 4,6 соток',
 ...