JSFiddle - React, Tailwind, and code Playground

by atach

HTML

<script type="text/javascript" src="https://yandex.st/jquery/2.2.3/jquery.min.js"></script>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&coordorder=longlat"></script>
<div id="YMapsID"></div>

CSS

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

JavaScript

ymaps.ready()
    .done(function (ym) {
        var myMap = new ym.Map('YMapsID', {
            center: [55.751574, 37.573856],
            zoom: 10
        }, {
            searchControlProvider: 'yandex#search'
        });

        jQuery.getJSON('https://sandbox.api.maps.yandex.net/examples/ru/2.1/data_load_jquery/data.json', function (json) {
            /** Сохраним ссылку на геообъекты на случай, если понадобится какая-либо постобработка.
             * @see https://api.yandex.ru/maps/doc/jsapi/2.1/ref/reference/GeoQueryResult.xml
             */
            var geoObjects = ym.geoQuery(json)
                    .addToMap(myMap)
                    .applyBoundsToMap(myMap, {
                        checkZoomRange: true
                    });
                    
                    myMap.geoObjects.add(geoObjects.clusterize());
        });
    });