Map of Yandex api offices?

Question

Yandex

How to make a Yandex api 2.1 map that will contain a window with a list of offices and their addresses when clicking on the link, a balloon would open on the map

Answer 1

Нашел данный пример но он на api 1.1 и при клике на ссылку не открывается балун

YMaps.jQuery(function () {
          // Создает экземпляр карты и привязывает его к созданному контейнеру
          var map = new YMaps.Map(YMaps.jQuery("#YMapsID")[0]);
              
          // Устанавливает начальные параметры отображения карты: центр карты и коэффициент масштабирования
         map.setCenter(new YMaps.GeoPoint(37.64, 55.76), 10);


          // Создает стиль
      var s = new YMaps.Style();

      // Создает стиль значка метки
      s.iconStyle = new YMaps.IconStyle();
      s.iconStyle.href = "images/map.png";
      // s.iconStyle.size = new YMaps.Point(140, 139);
      // s.iconStyle.offset = new YMaps.Point(-140, -139);

      // Создает метку 
      var placemark = new YMaps.Placemark(new YMaps.GeoPoint(37.505507499999915,55.743517277269156), {style: s});
      var placemark2 = new YMaps.Placemark(new YMaps.GeoPoint(37.52345549999994,55.64192027765163), {style: s});
      var placemark3 = new YMaps.Placemark(new YMaps.GeoPoint(37.62410349999998,55.68452827749535), {style: s});
      var placemark4 = new YMaps.Placemark(new YMaps.GeoPoint(37.545419499999944,55.42569577845532), {style: s});
      var placemark5 = new YMaps.Placemark(new YMaps.GeoPoint(37.540532499999934,55.654568777603394), {style: s});

      // Устанавливает содержимое балуна
      placemark.name = "Офис «Багратионовская»";
      placemark.description = "<H1>Офис «Багратионовская»</H1><br>Багратионовский проезд, д. 7, корп. 20В,вход через правовой центр,Тел.: [phone]<br><br>";

      placemark2.name = "Плов без слов";
      placemark2.description = "Комендатский пр., 30";

         placemark3.name = "Плов без слов";
      placemark3.description = "Комендатский пр., 30"

         placemark4.name = "Плов без слов";
      placemark4.description = "Комендатский пр., 30"

         placemark5.name = "Плов без слов";
      placemark5.description = "Комендатский пр., 30"

      // Создает группу меток

      var group = new YMaps.GeoObjectCollection();
          group.add(placemark);
          group.add(placemark2);
          group.add(placemark3);
          group.add(placemark4);
          group.add(placemark5);

          // Добавляет группу меток на карту
      map.addOverlay(group);

            // Действия при добавлении элемента на карту

      function OfficeNavigator (offices) {

      this.onAddToMap = function (map, position) {
              this.container = YMaps.jQuery("<ol></ol>")
              this.map = map;
              this.position = position || new YMaps.ControlPosition(YMaps.ControlPosition.TOP_LEFT, new YMaps.Size(10, 10));

              // CSS-свойства, определяющие внешний вид элемента
              this.container.css({
                   position: "absolute",
                         zIndex: YMaps.ZIndex.CONTROL,
                         background: '#fff',
                         listStyle: 'none',
                         padding: '10px',
                        margin: 0
              });
              
              // Формирует список офисов
              this._generateList();
              
              // Располагает элемент управления в верхнем правом углу карты
              this.position.apply(this.container);
              
              // Добавляет элемент управления на карту
              this.container.appendTo(this.map.getContainer());
      }

      // Обработчик удаления элемента управления с карты
      this.onRemoveFromMap = function () {
          if (this.container.parent()) {
              this.container.remove();
              this.container = null;
          }
          this.map = null;
      };


              // Формирует выпадающий список офисов
        this._generateList = function () {
            var _this = this;
            
            // Вызывает функцию-обработчик для каждого объекта
            offices.forEach(function (obj) {
                // Создает ссылку на объект
                var li = YMaps.jQuery("<li><a href=\"#\">" + obj.description + "</li>"),
                    a = li.find("a"); 
                
                // Создает обработчик щелчка мыши по ссылке
                li.bind("click", function () {
                    _this.map.panTo(obj.getGeoPoint(), {
                        flying: 1,
                        callback: function () {
                            size: "large";
                        }
                    });
                    return false;
                });
                
                // Создает слушатели событий открытия и закрытия балуна объекта
                YMaps.Events.observe(obj, obj.Events.BalloonOpen, function () {
                    a.css("text-decoration", "none");
                });
                
                YMaps.Events.observe(obj, obj.Events.BalloonClose, function () {
                    a.css("text-decoration", "");
                });
                
                // Добавляет ссылку на объект в общий список
                li.appendTo(_this.container);
            });
        };
      }

        // Создает элемент управления "Путеводитель по офисам"
        map.addControl(new OfficeNavigator(group));

      // Добавляет метку на карту
      /*
      map.addOverlay(placemark);
      map.addOverlay(placemark2);
      */


      // Создает элемент масштабирования
      var smallZoomControl = new YMaps.SmallZoom();
      map.addControl(smallZoomControl);




    })

Answer 2

https://tech.yandex.ru/maps/jsbox/2.1/object_list