JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://api-maps.yandex.ru/2.1-dev/?lang=ru-RU&load=package.full" type="text/javascript"></script>
<div class="hero-unit">
<div class="container">
<div id="YMapsID"></div>
</div>
</div>
CSS
#YMapsID {
width: 800px;
height: 600px;
}
JavaScript
ymaps.ready(function () {
// Обратите внимание, что по умолчанию на карту добавлен стандартный набор элементов управления.
// Для того чтобы задать нужные элементы управления, укажите в поле controls список соответствующих ключей.
// Если элементы управления не нужно отображать, в поле controls передайте пустой массив [].
var myMap = new ymaps.Map('YMapsID', {
center: [55.751574, 37.573856],
zoom: 12,
controls: ['zoomControl', 'geolocationControl', 'fullscreenControl']
});
myMap.options.set('balloonMaxWigth', 2000);
myMap.geoObjects
.add(new ymaps.Placemark([55.721434, 37.613477], {
balloonContentHeader: "Конный переулок, 4 (ЖК «Спортхаус»)",
hintContent: "Конный переулок, 4",
balloonContentBody: [
'<img src="http://res.cloudinary.com/xlift-ru/image/upload/c_fit,h_100/v1394324160/Konniy_4_unczfj.jpg" align="left" hspace="5"> Этажей: 10, <br />Подъездов: 4, <br />Квартир: 160,<br />Жильцов: 400,<br />Лифтов: 6.'].join('')
}, {
preset: 'islands#circleDotIcon',
iconColor: '#3caa3c'
}))
.add(new ymaps.Placemark([55.719697, 37.578182], {
balloonContentHeader: "3-я Фрунзенская ул., 5к1",
hintContent: "3-я Фрунзенская ул., 5к1",
balloonContentBody: [
'<img src="http://res.cloudinary.com/xlift-ru/image/upload/c_fit,h_100/v1394324145/3-ya_Frunzenskaya_5k1_syaigg.jpg" align="left" hspace="5"> Этажей: 10,<br />Подъездов: 2,<br />Квартир: 80,<br />Жильцов: 200,<br />Лифтов: 4.'].join('')
}, {
preset: 'islands#circleDotIcon',
iconColor: '#3caa3c'
}))
});