JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;mode=debug"></script>
<link rel="stylesheet" href="http://yandex.st/bootstrap/3.1.1/css/bootstrap.min.css">
<div class="row">
    <div class="col-sm-6"></div>
    <div class="col-sm-6" id="map"></div>
</div>

CSS

#map {
   height: 400px; 
}

JavaScript

ymaps.ready(init);

function init () {
    var myMap = new ymaps.Map("map", {
            center: [55.76, 37.64],
            zoom: 10
        }),
    // Создаем коллекцию геообъектов и задаем опции.
        myGeoObjects = new ymaps.GeoObjectCollection({}, {
            preset: "islands#redCircleIcon",
            strokeWidth: 4,
            geodesic: true
        });
    myGeoObjects.events.add('boundschange', function(event) {
        //undefined, WTF?
        //var bounds = event.get('newBounds');
        //bounds from collection still available, use it
        var bounds = myGeoObjects.getBounds();
        myMap.setBounds(bounds);
    });
    myMap.geoObjects.add(myGeoObjects);

// Добавляем в коллекцию метки и линию.
myGeoObjects.add(new ymaps.Placemark([13.38, 52.51]));
myGeoObjects.add(new ymaps.Placemark([30.30, 50.27]));
myGeoObjects.add(new ymaps.Polyline([[13.38, 52.51], [30.30, 50.27]]));
}