JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.0/?load=package.full&mode=release&lang=ru-RU" type="text/javascript"></script>
<div id="mapArea"></div>

CSS

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

JavaScript

window.city_latitude = 55;
window.city_longitude = 37;
window.city_coords = [
    [55.1,37],
    [55.2,37],
    [55.3,37],
    [55.4,37],
    [55.5,37],
    [55.6,37]
];
window.city_names = [
    'A',
    'I',
    'H',
    'G',
    'E',
    'F',
];

function init_map_yndx() {
    var myMap = new ymaps.Map('mapArea', {
        center: [city_latitude, city_longitude],
        zoom: 4,
        behaviors: ['default', 'scrollZoom']
    });
    var city_collection = new ymaps.GeoObjectCollection();
    for (var i = 0; i<city_coords.length; i++) {
        var city_obj = city_names[i];
        city_collection.add(new ymaps.Placemark(city_coords[i], {
            balloonContentHeader: 'zzz',
            balloonContentBody:'xxx'
        }, {
            hasBalloon: true,
            iconImageHref: 'http://sourceforge.net/p/sogo-zeg/icon',
            iconImageSize: [16, 16]
        }));
    }
    myMap.geoObjects.add(city_collection);
    myMap.setBounds(city_collection.getBounds());
}
ymaps.ready(init_map_yndx);