JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<div id="YaMaps"></div>
CSS
#YaMaps {
width: 400px;
height: 400px;
}
JavaScript
ymaps.ready(init);
function init () {
var myCollection = new ymaps.GeoObjectCollection();
var PrintMap = new ymaps.Map("YaMaps", {
center: [55.755381, 37.619044],
zoom: 16,
controls: ["zoomControl"]
}),
// Создаем многоугольник
polygon_1 = new ymaps.Polygon(
[[[55.77979345875988,37.83852143758791],[55.77995066718167,37.83993764394776],[55.78044647418601,37.84193320745486],[55.78392903752274,37.84161134237307],[55.78383230387317,37.840152220668976],[55.78182502621805,37.820067839565446],[55.77992648131209,37.818716006221955],[55.77587513541225,37.819295363369164],[55.77569372197099,37.820496993007836],[55.77631052421135,37.82283587926882],[55.779043686755,37.83440156454104],[55.77979345875988,37.83852143758791]]],
{},
{
hintContent: "Зона 1",
strokeWidth: 3,
fillOpacity: 0,
strokeColor: '#ff4500'
}
);
myCollection.add(polygon_1);
polygon_2 = new ymaps.Polygon(
[[[55.76670938036831,37.83241909155271],[55.76732632539392,37.834908181518536],[55.7673384222572,37.83636730322263],[55.767701326402765,37.839650327056845],[55.76679405967781,37.84031551489255],[55.761083841130144,37.84001510748287],[55.761204829044715,37.83205431112668],[55.76670938036831,37.83241909155271]]],
{},
{
hintContent: "Зона 2",
strokeWidth: 3,
...