JSFiddle - React, Tailwind, and code Playground

by Viktor Sviridenko

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;mode=debug"></script>
<div id="myMap"></div>
<button class="panTo" onclick="map.panTo([15, 0])">Переместиться к балуну</button>

CSS

html,
body,
#myMap {
	height: 100%;
	padding: 0;
}

.panTo {
	position: fixed;
	font-size: 20px;
	top: 20px;
	left: 20px;
	z-index: 500;
}

.layout {
	width: 50px;
	height: 50px;
	margin-top: -25px;
	margin-left: -25px;
	background: rgba(0, 255, 0, .3);
	border: 1px solid green;
}

JavaScript

ymaps.ready(function () {

	window.map = new ymaps.Map('myMap', { // Для центрирования кнопочкой записываю объект в window
		center: [0, 0],
		zoom: 6,
		type: 'yandex#map',
		behaviors:['drag'],
		controls: []
	});

	var layout = ymaps.templateLayoutFactory.createClass('<div class="layout"></div>');

	var balloon = new ymaps.Balloon(map, {
		//layout: layout
	});

	balloon.options.setParent(map.options);
	balloon.open([15, 0]);
});