Не отображаются балуны на Яндекс API

Нужно отображать много меток на карте, и что-бы по нажатию открывались балуны. С помощью документации получилось сделать одну метку и один балун. Но предполагается что их будет много, и я нашла в интернете старый код, в котором метки помещаются в коллекцию, и создается шаблон для отображения балуна. По итогу :метки на карте отображаются, а вот балуны при нажатию нет. Скорее всего неправильный синтаксис, так как информация 2012 года)). А с документацией я не смогла разобраться.

ymaps.ready(init);  
function init(){
    // Создание карты.
    var myMap = new ymaps.Map("map", {
        // Координаты центра карты.
        // Порядок по умолчанию: «широта, долгота».
        // Чтобы не определять координаты центра карты вручную,
        // воспользуйтесь инструментом Определение координат.
        center: [50.91141883648759,34.7973088543701],
        // Уровень масштабирования. Допустимые значения:
        // от 0 (весь мир) до 19.
        zoom: 14,
        controls: [],
        behaviors: []
    });
    //создаю метку
    var myPlacemark = new ymaps.Placemark (
      // Координаты метки
      [50.91141883648759,34.7973088543701], {
        name: 'Оперный театр',
                address: 'ул. Белинского, 59',
      });
      //создаю метку
      var myPlacemark1 = new ymaps.Placemark (
        // Координаты метки
        [50.9011891191192,34.79421894958494], {
          name: 'Театр драмы',
                  address: 'ул. Большая Покровская, д. 13',
        });
     // Создаем коллекцию, в которую будем добавлять метки
        var myCollection = new ymaps.GeoObjectCollection();
     myCollection
            .add(myPlacemark)
            .add(myPlacemark1);
            
      // Создаем шаблон для отображения контента балуна
      var myBalloonLayout = ymaps.templateLayoutFactory.createClass(
        '<h3>$[properties.name]</h3>' +
        '<p><strong>Адрес:</strong> $[properties.address]</p>'
      );
//  Помещаем созданный шаблон в хранилище шаблонов.
// Теперь наш шаблон доступен по ключу 'my#theaterlayout'
        ymaps.layout.storage.add('my#theaterlayout', myBalloonLayout);

        // Задаем наш шаблон для балунов геобъектов коллекции
        myCollection.options.set({
          balloonContentBodyLayout:'my#theaterlayout',
         // Максимальная ширина балуна в пикселах
          balloonMaxWidth: 300
        });

      // Добавление метки на карту
    myMap.geoObjects.add(myCollection);
}