JSFiddle - React, Tailwind, and code Playground

by Mariya Gnitetckaya

HTML

<script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<span>Adress1</span>
<span>Adress2</span>
<span>Adress3</span>
<div id="map"></div>

CSS

#map{
    width: 100%;
    height: 468px;
}
span{
    cursor: pointer;
    border: 1px solid red;
    padding: 10px;
    display: block;
    margin-bottom: 10px;
    text-align: center;
}

JavaScript

$(document).ready(function(){
	initMap();
});
function initMap(){
if ($('#map').length == 1) {
		var myMap,
			myPlacemark;

		function init(){
			destinations = {
				'Метка1': [55.933897, 49.120003],
				'Метка2': [55.937427, 49.198333],
				'Метка3': [55.973159, 49.223240]
			},
			myMap = new ymaps.Map("map", {
				center: destinations['Метка1'],
				zoom: 13,
				controls: []
			},{
				suppressMapOpenBlock: true
			});
			myMap.behaviors.disable('scrollZoom'); //Отключение увеличения скроллом мыши
			myPlacemark1 = new ymaps.Placemark(destinations['Метка1'], {
				hintContent: 'улица',
				balloonContentHeader: 'Заголовок',
				balloonContentBody: 'Описание',
				balloonContentFooter: 'Футер'
			},{
				preset: 'islands#blueIcon'
			});

			myPlacemark2 = new ymaps.Placemark(destinations['Метка2'], {
				hintContent: 'улица',
				balloonContentHeader: 'Заголовок',
				balloonContentBody: 'Описание',
				balloonContentFooter: 'Футер'
			},{
				preset: 'islands#blueIcon'
			});

			myPlacemark3 = new ymaps.Placemark(destinations['Метка3'], {
				hintContent: 'улица',
				balloonContentHeader: 'Заголовок',
				balloonContentBody: 'Описание',
				balloonContentFooter: 'Футер'
			},{
				preset: 'islands#blueIcon'
			});
            var myPlacemarks = [myPlacemark1, myPlacemark2, myPlacemark3];

			myMap.geoObjects.add(myPlacemark1);
			myMap.geoObjects.add(myPlacemark2);
			myMap.geoObjects.add(myPlacemark3);

			var link = $('span');

			link.each(function(index) {
				$(this).on('click', function(event) {
                    
					event.preventDefault();
                    index = $(this).index()
					myMap.panTo(destinations["Метка"+(index+1)], {flying: 1});
                    myPlacemarks[index].balloon.open();
				});
			});
		}
		ymaps.ready(init);
	}
}