JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html>
<html>
<head>
<title>Примеры. Открытие балуна кластера с выбранным объектом</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- Если вы используете API локально, то в URL ресурса необходимо указывать протокол в стандартном виде (http://...)-->
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
<style>
html, body, #map {
width: 100%; height: 100%; padding: 0; margin: 0;
}
</style>
<script type="text/javascript">
ymaps.ready(init);
function init () {
var myMap = new ymaps.Map("map", {
center: [48.31,23.38],
zoom: 9
}),
myGeoObject = new ymaps.GeoObject // не знаю зачем ета строчка, но без неё не работает карта
myMap.geoObjects
.add(myGeoObject)
.add(new ymaps.Placemark([48.440189,22.717202], {
balloonContent: 'цвет <strong>воды пляжа бонди</strong>'
}, {
preset: 'islands#circleDotIcon',
iconColor: '#0095b6'
}))
.add(new ymaps.Placemark([48.440612,22.717551], {
balloonContent: '<strong>серобуромалиновый</strong> цвет'
}, {
preset: 'islands#circleDotIcon',
iconColor: '#735184'
}))
.add(new ymaps.Placemark([48.441044,22.717894], {
balloonContent: 'цвет <strong>влюбленной жабы</strong>'
}, {
preset: 'islands#circleDotIcon',
iconColor: '#3caa3c'
}))
.add(new ymaps.Placemark([48.441505,22.718189], {
balloonContent: 'цвет <strong>детской неожиданности</strong>'
}, {
preset: 'islands#circleDotIcon',
iconColor: 'yellow'
}))
.add(new ymaps.Placemark([48.442015,22.718296], {
balloonContent: 'цвет <strong>бисмарк-фуриозо</strong>'
}, {
preset: 'islands#circleDotIcon',
iconColor: '#a5260a'
...