Собственный html-контент балуна метки

Open in CodeSandbox

Через свойства и опции геообъектов можно задавать содержимое для балуна и всплывающей подсказки, а также изменять их внешний вид.

Содержимое балуна/всплывающей подсказки задается через свойства геообъекта:

  • hintContent - содержимое всплывающей подсказки геообъекта;
  • balloonContent - содержимое балуна геообъекта;
  • balloonContentHeader - содержимое заголовка балуна геообъекта;
  • balloonContentBody - содержимое основой части балуна геообъекта;
  • balloonContentFooter - содержимое нижней части балуна геообъекта.
При задании содержимого можно использовать HTML-разметку.

Обратите внимание, через HTML-разметку можно задать только внутреннюю структуру балуна/всплывающей подсказки. Если нужно изменить их внешний вид, вам потребуется переопределить их макет с помощью фабрики templateLayoutFactory. Макет задается через опции геообъекта.

Фабрика макетов позволяет решить задачи:

  • поменять форму балуна и всплывающей подсказки;
  • сдвинуть относительно метки;
  • изменить внешний вид крестика закрытия балуна;
  • изменить внешний вид ножки балуна и др.
Чтобы понять, как работать с фабрикой макетов, посмотрите пример Пользовательский макет балуна с поддержкой автопозиционирования. 

<!DOCTYPE html>
<html>
    <head>
        <title>Собственный html-контент балуна метки</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=utf-8"
        />
        <!--
        Укажите свой API-ключ. Тестовый ключ НЕ БУДЕТ работать на других сайтах.
        Получить ключ можно в Кабинете разработчика: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&amp;apikey=<ваш API-ключ>"
            type="text/javascript"
        ></script>
        <script src="balloon_html.js" type="text/javascript"></script>
        <style>
            html,
            body,
            #map {
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }

            .description {
                display: block;
                color: #999;
                font-size: 10px;
                line-height: 17px;
            }

            .emoji {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 200px;
                height: 100px;
                font-size: 100px;
            }

            a,
            a:visited {
                color: #04b;
                text-decoration: none !important;
            }
        </style>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

ymaps.ready(init);

function init() {
    var myMap = new ymaps.Map(
        "map",
        {
            center: [55.751574, 37.573856],
            zoom: 9,
            controls: [],
        },
        {
            searchControlProvider: "yandex#search",
        }
    );

    var placemark = new ymaps.Placemark(myMap.getCenter(), {
        // Зададим содержимое заголовка балуна.
        balloonContentHeader:
            '<a href = "#">Рога и копыта</a><br>' +
            '<span class="description">Сеть кинотеатров</span>',
        // Зададим содержимое основной части балуна.
        balloonContentBody:
            '<div class="emoji">🎬</div><br/>' +
            '<a href="tel:+7-123-456-78-90">+7 (123) 456-78-90</a><br/>' +
            "<b>Ближайшие сеансы</b> <br/> Сеансов нет.",
        // Зададим содержимое нижней части балуна.
        balloonContentFooter:
            'Информация предоставлена:<br/>OOO "Рога и копыта"',
        // Зададим содержимое всплывающей подсказки.
        hintContent: "Рога и копыта",
    });
    // Добавим метку на карту.
    myMap.geoObjects.add(placemark);
    // Откроем балун на метке.
    placemark.balloon.open();
}