@Kerbin

Как стилизовать балун в яндекс картах?

Добрый день. Как стилизовать балун так, чтобы он позиционировался в самом низу карты?

ymaps.ready(init);

function init() {
    var map = new ymaps.Map('map', {
        center: [55.584222181163646, 37.38552449999999],
        zoom: 8, 
        controls: []
    });

    var placemark = new ymaps.Placemark([55.75399399999374,37.6], {
        hintContent: 'ремонт',
        balloonContent: [
            '<div class="allservices__item allservices__item-js">',
                '<button class="allservices__cancel"><img src="images/allservices/bt-cancel.svg" alt="cancel" width="8" height="8"></button>',
                '<header class="allservices__item-header">',
                    '<h3 class="allservices__item-title allservices__item-title-dekstop">Авто Фаворит<span><img src="images/application-king.svg" alt="king" width="12" height="12"></span></h3>',
                    '<div class="allservices__header-wrapper">',
                        '<div class="allservices__item-img"><img src="images/allservices/allservices-1.png" alt="allservices" width="60" height="60"></div>',
                        '<div class="allservices__item-about">',
                            '<h3 class="allservices__item-title allservices__item-title-tel">Авто Фаворит<span><img src="images/application-king.svg" alt="king" width="12" height="12"></span></h3>',
                            '<div class="allservices__estimation">',
                                '<div class="allservices__stars">',
                                    '<div class="allservices__star"><img src="images/star.svg" alt="star" width="14" height="13"></div>',
                                    '<div class="allservices__star"><img src="images/star.svg" alt="star" width="14" height="13"></div>',
                                    '<div class="allservices__star"><img src="images/star.svg" alt="star" width="14" height="13"></div>',
                                    '<div class="allservices__star"><img src="images/star.svg" alt="star" width="14" height="13"></div>',
                                    '<div class="allservices__star"><img src="images/star.svg" alt="star" width="14" height="13"></div>',
                                '</div>',
                                '<div class="allservices__like-wrapper">',
                                    '<div class="allservices__like"><img src="images/allservices/icon-like.svg" alt="like" width="10" height="10"><span class="like__value">3</span></div>',
                                    '<div class="allservices__dislike"><img src="images/allservices/icon-dislike.svg" alt="dislike" width="10" height="10"><span class="like__value">0</span></div></div>',
                                '</div>',
                        '</div>',
                    '</div>',
                '</header>',
                '<div class="allservices__item-bottom">',
                    '<div class="allservices__spec-list">',
                        '<div class="allservices__spec-item">',
                            '<img src="images/allservices/allservices-spec-1.svg" alt="allservices" width="14" height="14">',
                        '</div>',
                        '<div class="allservices__spec-item">',
                            '<img src="images/allservices/allservices-spec-2.svg" alt="allservices" width="14" height="14">',
                        '</div>',
                        '<div class="allservices__spec-item">',
                            '<img src="images/allservices/allservices-spec-3.svg" alt="allservices" width="14" height="14">',
                        '</div>',
                        '<div class="allservices__spec-item">',
                            '<img src="images/allservices/allservices-spec-4.svg" alt="allservices" width="14" height="14">',
                        '</div>',
                        '<div class="allservices__spec-item">',
                            '<img src="images/allservices/allservices-spec-5.svg" alt="allservices" width="14" height="14">',
                        '</div>',
                        '<div class="allservices__spec-item">',
                            '<img src="images/allservices/allservices-spec-6.svg" alt="allservices" width="14" height="14">',
                        '</div>',
                        '<div class="allservices__spec-item">',
                            '<img src="images/allservices/allservices-spec-7.svg" alt="allservices" width="14" height="14">',
                        '</div>',
                        '<div class="allservices__spec-item">',
                            '<img src="images/allservices/allservices-spec-8.svg" alt="allservices" width="14" height="14">',
                        '</div>',
                        '<div class="allservices__spec-item">',
                            '<img src="images/allservices/allservices-spec-9.svg" alt="allservices" width="14" height="14">',
                        '</div>',
                    '</div>',
                    '<p class="allservices__address">',
                        'Волоколамское ш., 125 корпус 1, Москва, Moscow Oblast, Россия, 125371',
                    '</p>',
                '</div>',
                '<div class="allservices__btn-wrap">',
                    '<a href="#" class="allservices__link entry-link">Записаться</a>',
                    '<a href="#" class="allservices__chat chat-open"><img src="images/application-mail.svg" alt="chat" width="19" height="19"></a>',
                '</div>',
            '</div>',
        ].join('')
    },

    {
        iconLayout: 'default#image',
        iconImageHref: './images/map/icon-map-blue.svg',
        iconImageSize: [36, 36]
    });
  • Вопрос задан
  • 234 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы