Hello! There is a common map with several tags. And there is a list with a description of different objects and each one has a "look at the map" button.
The markup is approximately as follows:
<div class="maps" id="map"> <!-- сюда вставляется карта с метками всех адресов--> </div> <!-- элементы внутри которых должны быть кнопки, перемещающие метку на карте или открывающие новую карту с нужной меткой --> <div class="container"> <div class="item"> <div class="content"></div> <a href="">посмотреть на карте</a> </div> <div class="item"> <div class="content"></div> <a href="">посмотреть на карте</a> </div> <div class="item"> <div class="content"></div> <a href="">посмотреть на карте</a> </div> </div> I connect the card like this:
ymaps.ready(init); function init() { myMap = new ymaps.Map('map', { center: [55.753559, 37.609218] zoom: 10 }); myMap.geoObjects .add(new ymaps.Placemark([55.753559, 37.609218], { iconCaption: "Москва", })) .add(new ymaps.Placemark([59.938531, 30.313497], { iconCaption: "Санкт-Петербург", })) .add(new ymaps.Placemark([56.829748, 60.617435], { iconCaption: "Екатеринбург", })); } It is necessary that when a particular object is pressed, there is only one mark on the map (with the coordinates of this object) or the center is shifted to the center of coordinates of the selected address. How to implement this?
A very similar example here is https://tech.yandex.ru/maps/jsbox/2.1/object_list But I need not objects, but only one label, and the menu itself should be added to already existing blocks