Яндекс.Карты: Размещение нескольких точек

Пример с размещением нескольких точек на Яндекс карте, реакцией на клик, а также боковым сайд блоком со списком офисов.

index.html

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="UTF-8">
  <title>Yandex Map Test</title>
  <link rel="stylesheet" href="map.css">
  <script src="https://api-maps.yandex.ru/2.1/?apikey=XXX&lang=ru_RU" type="text/javascript"></script>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="map.js"></script>
</head>

<body>
  <section id="ymap">
    <div class="ymap-side">
      <div class="ymap-side__item" data-id="10">
        <div class="ymap-side__title">
          Абакан
        </div>
        <div class="ymap-side__address">
          г. Абакан, ул. Фрунзе, д. 2
        </div>
      </div>
      <div class="ymap-side__item" data-id="11">
        <div class="ymap-side__title">
          Алматы
        </div>
        <div class="ymap-side__address">
          Республика Казахстан, г. Алматы, ул. Ахметова, д. 51
        </div>
      </div>
      <div class="ymap-side__item" data-id="12">
        <div class="ymap-side__title">
          Астрахань
        </div>
        <div class="ymap-side__address">
          г. Астрахань, ул. Звездная дом 7 корпус 3
        </div>
      </div>
      <div class="ymap-side__item" data-id="13">
        <div class="ymap-side__title">
          Владивосток
        </div>
        <div class="ymap-side__address">
          г. Владивосток, ул. Набережная, д. 9, оф. 8
        </div>
      </div>
      <div class="ymap-side__item" data-id="14">
        <div class="ymap-side__title">
          Чебоксары
        </div>
        <div class="ymap-side__address">
          Обслуживается через филиал в Казани
        </div>
      </div>
    </div>
    <div class="ymap__map">
      <div id="map" style="width: 600px; height: 300px"></div>
    </div>
  </section>
</body>
</html>

map.js

const aItems = [
 {
 id : 10,
 title : 'Абакан',
 x : '53.736180145476',
 y : '91.457394864418',
 url : 'https://yandex.ru/yandsearch?text=Абакан',
 },
 {
 id : 11,
 title : 'Алматы',
 x : '43.359369644128',
 y : '77.015855771163',
 url : 'https://yandex.ru/yandsearch?text=Алматы',
 },
 {
 id : 12,
 title : 'Астрахань',
 x : '46.326895',
 y : '48.048423',
 url : 'https://yandex.ru/yandsearch?text=Астрахань',
 },
 {
 id : 13,
 title : 'Владивосток',
 x : '43.112157939326',
 y : '131.8729985',
 url : 'https://yandex.ru/yandsearch?text=Владивосток',
 },
 {
 id : 14,
 title : 'Чебоксары',
 x : '56.146247',
 y : '47.250153',
 url : 'https://yandex.ru/yandsearch?text=Чебоксары',
 },
];

let Places = [];


function init(){
 const myMap = new ymaps.Map("map", {
 center: [55.76, 37.64],
 zoom: 2 // 0 - 19
 });


 for (let item of aItems) {
/*
 let myGeoObject = new ymaps.GeoObject({
 geometry: {
 type: "Point", // тип геометрии - точка
 coordinates: [item.x, item.y]
 }
 });
 myMap.geoObjects.add(myGeoObject);
*/
 let oPlacemark = new ymaps.Placemark([item.x, item.y], {
 balloonContentHeader: item.title,
 balloonContentBody: 'Перейти к <a target="_blank" href="' + item.url + '">поиску</a>',
 //balloonContentFooter: "Подвал",
 hintContent: item.title // "Хинт метки"
 });
 oPlacemark.events.add('click', function () {
 //alert('О, событие!');
 });
 myMap.geoObjects.add(oPlacemark);

 Places[item.id] = oPlacemark;
 }
}

ymaps.ready(init);


(function($){
 $(function() {
 $('#ymap .ymap-side__title ').on('click', function(event){
 let id = $(this).parent().data("id");
 Places[id].balloon.open();
 });
 });
})(jQuery);

map.css

#ymap {
 display: flex;
}

#ymap .ymap-side {
 height: 300px;
 overflow-y: scroll;
}

#ymap .ymap-side__item {
 height: 79px;
 padding-top: 10px;
 padding-bottom: 10px;
 width: 90%;
 overflow: hidden;
 border-bottom: 1px solid #bbdceb;
 margin: 0 auto;
}

#ymap .ymap-side__title {
 font-size: 20px;
 color: #19a2e1;
 margin-top: 20px;
 cursor: pointer;
}

#ymap .ymap-side__address {
 font-size: 15px;
 color: #000;
}


@media (max-width: 768px) {
 #ymap {
 flex-direction: column;
 }
}

Абакан

г. Абакан, ул. Фрунзе, д. 2

Алматы

Республика Казахстан, г. Алматы, ул. Ахметова, д. 51

Астрахань

г. Астрахань, ул. Звездная дом 7 корпус 3

Владивосток

г. Владивосток, ул. Набережная, д. 9, оф. 8

Чебоксары

Обслуживается через филиал в Казани