JSFiddle - React, Tailwind, and code Playground

by Anton Ayupov

HTML

<script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>

<div id="map"></div>

CSS

html, body, #map {
            width: 100%; height: 100%; padding: 0; margin: 0;
        }
 
 .my_icon {
   position: absolute;
   text-align: center;
   left: -23px;
   top: -23px;
   width: 46px;
   height: 46px;
   line-height: 46px;
   border: 2px solid #218703;
   background-color: tomato;
   color: #fff;
}

JavaScript

ymaps.ready(function () {
    /* Шаблон иконки */
     var myIcon = ymaps.templateLayoutFactory.createClass('<div class="my_icon">' + 
          '{{ properties.iconCaption }}' + 
    '</div>');

    var myMap = new ymaps.Map('map', {
            center: [55.751574, 37.573856],
            zoom: 9
        }),
        myPlacemark = new ymaps.Placemark(myMap.getCenter(), {				
            hintContent: 'Собственный значок метки',
            balloonContent: 'Это красивая метка',
            iconCaption: 'test',
        }, {
            iconLayout: myIcon,
            iconShape: {
                coordinates: [
                    [-25, -25], [25, 25]
                ]
            }
        });

    myMap.geoObjects.add(myPlacemark);
});