Создание макета балуна для полного изменения его внешнего вида + кастомная кнопка закрытия

  вам правильно написал - используйте фабрику макетов для создания своего макета кнопки закрытия и передайте его метке в опции "balloonCloseButtonLayout" или балуну напрямую в опции "closeButtonLayout"

Это какими надо обладать телепатическими способностями, чтобы по тому куску кода, что вы дали в первом комментарии понять: что вы прявязали к карте собственные события, что вы получаете data-action по клику на элемент с классом action, затем вызываете map.events.fire со значением полученным из этого data-action и только потом по этому событию у вас происходит map.balloon.close();

В общем как я и сказал сначала - абсолютно бесполезная копипаста куска кода вырванная из контекста

map.balloon.close(); - собственно все, что мне нужно было узнать.

В итоге правильный ответ на мой вопрос:

balloonContent: 'Я живу тут!myMap.balloon.close()" class="custom_close_button">Закрыть'

само-собой myMap должна быть глобальной переменной, но это уже детали

И никаких фабрик макетов

как раз нет.

правильный ответ в создании макета.

а то, что вы называете "правильным" - костыль.

потому что для кнопки закрытия сделан собственный контейнер и опция для макета closeButtonLayout.

А то, что расковыряли мой код - это было бессмысленно. Если вы разобрались с кастомизацией баллуна ("все очень просто"), то мой код для вас должен быть простым.

не надо быть оракулом, чтобы по аналогии с кастомизацией тела баллуна, понять кастомизацию кнопки "закрыть".

Ок, наверно я не правильно сформулировал свой вопрос.

Вероятно он должен был звучать так:

"А вот как к подобному измененному балуну прикруть кастомную кнопку закрытия? + чтобы эта кнопка работала"

Ведь сам факт использования макета кнопки закрытия и передачи его в closeButtonLayout - не делает эту кнопку рабочей.

Отсюда ещё один вопрос: зачем вообще создавать макет для кнопки, если я могу на любом html элементе внутри balloonContent: вызывать по клику myMap.balloon.close() (не важно будет ли это onclick или jquery .on() или ещё как-то)

Разница в том что вам не нужно будет вызывать самому myMap.balloon.close(), а также вешать обработчик и создавать глобальные переменные.

Если вы хотите это делать сами, не забудьте снять обработчик после закрытия балуна, иначе балун будет удален из DOM дерева, а ваш обработчик так и останется и будет кушать память, и при открытии нового балуна будет новый обработчик и т.д.

У меня подобная проблема. И как я вижу, кто-то кого-то не понимает. 

Вот смотрите, есть код: 

                var btnClose = ymaps.templateLayoutFactory.createClass(                    '', {                    build: function() {                        this.constructor.superclass.build.call(this);                    },                                        clear: function() {                        this.constructor.superclass.clear.call(this);                    }                                                     });                                             mMap.clusterEvents = new ymaps.Clusterer({                    clusterBalloonMainContentLayout: tCenterRow,                    clusterBalloonSidebarItemLayout: tLeftRow,                    clusterBalloonCloseButtonLayout: btnClose,                    clusterBalloonMinWidth: 796,                    clusterBalloonWidth: 546,                    clusterBalloonSidebarWidth: 250,                    clusterBalloonShadow: false                 }); 

но при клике на кнопку закрытия балун не закрывается. Вопрос, надоли внутри фабрики что-то прописывать для этого случая специально или это проблема не в картах, а собственном коде?

конечно

надо самому слушать клик на вашей кнопке и самому закрывать балун

Я буду очень благодарен, если вы поделитесь правильным(с т.з API 2.0) решением на этом примере.

 чтото типа этого

        myBalloonCloseButtonLayout = ymaps.templateLayoutFactory.createClass('x', {            build: function () {                this.constructor.superclass.build.call(this);                $('#close-balloon-link').on('click', $.proxy(this.onCloseClick, this));            },            clear: function () {                $('#close-balloon-link').off('click');                this.constructor.superclass.build.call(this);            },            onCloseClick: function () {                this.getData().geoObject.balloon.close();            }        });

Огромное спасибо!

Если у кого-то, как и у меня балун открывается для кластера, то используйте вместо:

this.getData().geoObject.balloon.close();

вот эту сторку:

this.getData().cluster.balloon.close();

Воспользовался вашим примером. Не работает. Помогите, пожалуйста. Вот код:

 var myBalloonCloseButtonLayout = ymaps.templateLayoutFactory.createClass('x', {

        build: function () {

            this.constructor.superclass.build.call(this);

            $('#close-balloon-link').bind('click', $.proxy(this.onCloseClick, this));

        },

        clear: function () {

            $('#close-balloon-link').unbind('click', $.proxy(this.onCloseClick, this));

            this.constructor.superclass.build.call(this);

        },

        onCloseClick: function () {

            this.getData().geoObject.balloon.close();

        }

    });

ymaps.layout.storage.add('my#balloonclosebuttonlayout', myBalloonCloseButtonLayout);

var coords = [

            {c:[57.635268, 39.84494], properties:{

                name:'Название точки',

                balloonContent:'Я живу тут!',

                type:'Тип стsdfsdfия'

            }},

            {c:[57.625323, 39.853867], properties:{

                name:'Название точки',

                type:'Тип строения',

                balloonContent:'контент балуна'

            }, options:{

                hideIconOnBalloonOpen:false,

                balloonContentSize:[100, 100],

                balloonLayout:"default#imageWithContent",

                balloonImageHref:'/lk/img/balloon.png',

                iconImageHref:'/lk/img/icons/home-gray.png',

                // Смещение картинки балуна

                balloonImageOffset:[27, -248],

                // Размеры картинки балуна

                balloonImageSize:[538, 390],

                // Балун не имеет тени

                balloonShadow:false,

                balloonCloseButtonLayout:'my#balloonclosebuttonlayout' // вот это не работает

            }},

            {c:[57.616113, 39.86348], properties:{

                name:'Название точки',

                type:'Тип строения',

                hintContent:'Hint Content',

                placeMarkId:'12345'

            }},

            {c:[57.617955, 39.884766], properties:{

                name:'Название точки',

                type:null

            }},

            {c:[57.636004, 39.917725], properties:{

                name:'Название точки',

                type:'Тип строения'

            }},

            {c:[57.634067, 39.851359], properties:{

                name:'Свердлова, 96.7',

                type:'Тип строения'

            }, options:{

                iconImageHref:'/lk/img/icons/home-gray.png',

                iconImageOffset:[-10, -50]

            }}

        ],

        myCollection = new ymaps.GeoObjectCollection({}, {

            preset:'twirl#redIcon' //все метки красные

            //draggable:true // и их можно перемещать

        });

$(coords).each(function (i, o) {

        //console.info(o);

        myCollection.add(new ymaps.Placemark(o.c, o.properties, o.options)); // добавляем точки в коллекцию

    })

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

1. 

balloonLayout:"default#imageWithContent",

это макет балуна с использованием изображения. думаю с ним не будет работать

2.  

 $('#close-balloon-link').unbind('click', $.proxy(this.onCloseClick, this));

этот код не отпишет слушателя от кнопки, т.к. вызов $.proxy каждый раз возвращает новую функцию. т.е. тут у вас утечка памяти