How to add location points to the map using the Yandex API?

Question

JavaScript

I'm making a map, next to which a list of addresses will be displayed. When you click on one of them, the map moves to the location. I do according to the Yandex API from this page . Here is my JS code:

// Map	
ymaps.ready(init);
function init() {
  // Locations
  let items = [
    {
      center: [50.426472, 30.563022],
      name: 'ТЦ «7 Континент»',
      address: 'ул. Магомеда Ярагского, 30',
      background: 'blue'
    },
    {
      center: [50.45351, 30.516489],
      name: 'DonutsDay',
      address: 'г. Махачкала, ул. Лаптиева 49а',
      background: 'red'
    },
    {
      center: [50.454433, 30.529874],
      name: 'DonutsDay',
      address: 'г. Махачкала, ул. Дзержинского 8',
      background: 'yellow'
    }
  ]
  
  let myMap = new ymaps.Map('map', {
      center: [50.443705, 30.530946],
      zoom: 14
    }, {
      searchControlProvider: 'yandex#search'
    }),
    menu = $('.contactsMap__cards');
  
  for ( let j = 0, m = items.length; j < m; j++ ) {
    createMenu(items[j]);
  }
  function createMenu (items) {
    let card      = $('<div class="contactsMapCard contactsMapCard_background_' + items.background + '"><div class="contactsMapCard__title">' + items.name + '</div><div class="contactsMapCard__address">' + items.address + '</div></div>'),
      placemark = new ymaps.Placemark(items.center, { balloonContent: items.name });
    card
      .appendTo(menu)
      .find('.contactsMapCard')
      .bind('click', function () {
        if (!placemark.balloon.isOpen()) {
          placemark.balloon.open();
        } else {
          placemark.balloon.close();
        }
        return false;
      });
  }
};

A list of addresses next to the map is displayed, but I could not make the corresponding locations appear on the map itself .

In the example from Yandex, they use collections to group locations in the list, but I don't need them, so I edited the code from their example, but there is such a problem.

Answer 1

Firstly, you don't assign a click handler, you perform find on the element you are trying to find.
Secondly - say that the map "when pressed, moves to the location", something I don’t see here at all. You need to use the setCenter method.
Thirdly - how are you going to show pop-up windows of labels on the map, if the labels themselves are not connected with the map in any way? Discard labels and use popup maps (like so ), or still add labels to the map (like so ).