JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://api-maps.yandex.ru/2.1-dev/?lang=ru-RU&amp;mode=debug"></script>
<div id=map></div>

CSS

html, body, #map {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%
}

JavaScript

// Подробнее http://api.yandex.ru/maps/
ymaps.ready(function () {
    var myMap = new ymaps.Map('map', {
            center: [55.751432, 37.716621],
            zoom: 14,
            controls: ['rulerControl']
        }),
        coordSystem = myMap.options.get('projection').getCoordSystem(),
        placemark1 = new ymaps.Placemark(myMap.getCenter()),
        northPoint = coordSystem.solveDirectProblem(
            myMap.getCenter(), 
            getDirection(0), // движемся на севере
            1000 // в метрах
        ),
        placemark2 = new ymaps.Placemark(northPoint.endPoint),
        westPoint = coordSystem.solveDirectProblem(
            myMap.getCenter(), 
            getDirection(- Math.PI / 2), // движемся на запад
            1000 // в метрах
        ),
        placemark3 = new ymaps.Placemark(westPoint.endPoint);
    
    myMap.geoObjects.add(placemark1);
    myMap.geoObjects.add(placemark2);
    myMap.geoObjects.add(placemark3);
});
    
function getDirection (azimuth) {
    return [Math.cos(azimuth), Math.sin(azimuth)];
}