JSFiddle - React, Tailwind, and code Playground

by Stafox

HTML

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

CSS

#map{
    width:100%;
    height:500px;
}

JavaScript

Math.rand = function(min, max)
{
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

var mapInstance;

ymaps.ready(init);

function init () {
    var balloonTemplate = ymaps.templateLayoutFactory.createClass(
        '<p>$[properties.rooms]-комнатная квартира, <strong>$$[properties.cost]</strong></p>' +
        '<a href="/ticket/$[properties.id]/">Подробнее</a>'
    );
    mapInstance = new ymaps.Map('map', {
                center: [53.906077, 27.554914],
                zoom: 11,
                controls: ['zoomControl'],
                type: 'yandex#map'
            });
    var ticketsCollection = new ymaps.GeoObjectCollection();
    for (var i = 0; i < 10; i++) {
                var ticketData = {
                    id: i,
                    rooms: Math.rand(1,4),
                    cost: Math.rand(3,8) * 100
                };
                var ticketPlacemark = new ymaps.Placemark([53.906077 + 0.003 * i * 3, 27.554914 + 0.002 * i * 4], {
                        properties: ticketData
                    },
                    {
                        balloonContentLayout: balloonTemplate,
                        preset: 'islands#dotIcon',
                        iconColor: '#55606e'
                    });
                ticketsCollection.add(ticketPlacemark);
        }
        
        mapInstance.geoObjects.add(ticketsCollection);
}