JSFiddle - React, Tailwind, and code Playground

by scaard

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>

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

<div class="hidden" id="point7438">

    <div class="b-search-map__item">
        Контент
</div>

CSS

html, body, #map {
            width: 100%; height: 100%; padding: 0; margin: 0;
        }
		.hidden {
			display: none;
		}
		
		.b-search-map__item {
			display: block;
			width: 394px;
			height: 123px;
			overflow: hidden;
			background: #fff;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
			text-align: left;
			position: relative;
			z-index: 100;
			font-size: 0;
		}
		
		.map-label{
			background: white  url('https://yabs.yandex.ru/resource/CXbACNS1xLfuwhc_IbTVP5_banana_20141031_60-60.png') 1px 1px no-repeat;
			background-size:30px 30px;
			height:32px;
			width:200px;
			padding-left:35px;
			border-radius:20px;
			padding-top:7px;
			box-sizing:border-box;
		}

JavaScript

jQuery(document).ready(function () {
        var geoPoints = [
			[55.53828, 37.067785],

        ];

		var point7438 = document.getElementById("point7438").innerHTML;
		//console.log(point7438);

        var myCollection;

        ymaps.ready(function () {
		

            var myMap = new ymaps.Map("map", {
                center: [55.751574, 37.573856],
                zoom: 6,
                controls: [],
            });

            myMap.controls.add("zoomControl", {
                size: "small",
                position: {right: 30, top: 120}
            });


            myCollection = new ymaps.GeoObjectCollection();

            function setCenter($cords) {
                myMap.setCenter($cords);
            }

            function createPlacemark($cords, $content, name) {

                var squareLayout = ymaps.templateLayoutFactory.createClass('<div class="map-label">'+name+'</div>');

                var myPlacemark = new ymaps.Placemark($cords, {
                    balloonContent: $content,
                    iconContent: name

                }, {
                    //iconLayout: "default#imageWithContent",
                    //preset: "islands#blueCircleDotIcon",
                    iconLayout: squareLayout,
                    iconShape: {
                       type:'Rectangle',
                       coordinates: [
                       [0, 0], 
                       [200, 35]
                       ]
                       
                    },
                    //iconImageHref: "https://yabs.yandex.ru/resource/CXbACNS1xLfuwhc_IbTVP5_banana_20141031_60-60.png",
                    //iconImageSize: [30, 30],
                    //iconImageOffset: [-12, -40],
                    hideIconOnBalloonOpen: false,
                    //balloonOffset: [0, -50],
                    balloonCloseButton: false
                    //balloonContentLayout: squareLayout
                });

                myPlacemark.events
                   ...