JSFiddle - React, Tailwind, and code Playground

by Bahman ParsaManesh

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Example of setting custom HTML layouts for placemarks with your own hotspot shapes</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<!-- If you are using the API locally, you must specify the protocol in the standard form (https://...) in the resource URL.-->
    <script src="https://api-maps.yandex.ru/2.1/?lang=en_US" type="text/javascript"></script>
    <!-- <script src="placemark_shape.js" type="text/javascript"></script> -->
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
</body>
</html>

JavaScript

ymaps.ready(init);
        var myMap, 
            myPlacemark;

        function init(){ 
            myMap = new ymaps.Map("map", {
                center: [35.774350, 51.319617],
                zoom: 17
        });

        myPlacemark = new ymaps.Placemark([35.774350, 51.319617], { hintContent: 'Moscow!', balloonContent: 'Capital of Russia'
            });
            
            myMap.geoObjects.add(myPlacemark);
        }