JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <script src="http://api-maps.yandex.ru/2.0/?load=package.standard&lang=ru-RU" type="text/javascript"> </script>
    </head>
    <body>
        <div style="width: 450px; height: 450px;" data-name="БЕРГ &lt;br/&gt; ул. 2-я Мелитопольская, дом 4А, стр. 40" data-latitude="55.534624" data-longitude="37.573993" class="map">
        </div>
    </body>
</html>

JavaScript

$(function(){
    ymaps.ready(function() {
        $('.map').each(function() {
            var latitude  = $(this).attr('data-latitude');
            var longitude = $(this).attr('data-longitude');
            var name      = $(this).attr('data-name');
    
            if (typeof latitude == "undefined"
                || typeof longitude == "undefined") {
    
                return true; //continue
            }
    
            var myMap = new ymaps.Map(this, {
                    center: [latitude, longitude],
                    zoom: 15
                }, {
                    projection: ymaps.projection.sphericalMercator,
                    tileTransparent: true,
                    maxZoom: 16,
                    minZoom: 10
                }),
    
                myPlacemark = new ymaps.Placemark([latitude, longitude], {
                    balloonContentBody: name
                }, {
                    // Опции
                    preset: 'twirl#blueStretchyIcon'
                });
    
            myMap.controls
                .add('zoomControl')
                .add('typeSelector')
                .add('mapTools');
    
            myMap.geoObjects
                .add(myPlacemark);
    
            myMap.layers.add(new ymaps.Layer(
                function(tileNumber, tileZoom) {
                    if (tileZoom == 15 || tileZoom == 16) {
                        return 'http://berg.ru/yandex/' + tileZoom + '/' + 'tile-' + tileNumber[0] + '-' + tileNumber[1] + '.png';
                    }
                    return 'http://berg.ru/yandex/256.png';
                }, {
                projection: ymaps.projection.sphericalMercator,
                notFoundTile: 'http://berg.ru/yandex/256.png'
            }));
    
    
            myMap.events.add('boundschange', function (event) {
                if (event.get('newZoom') != event.get('oldZoom')) {
                    var position = myMap.getGlobalPixelCenter();
                    var zoom =...