Метка и балун-панель

Open in CodeSandbox

В данном примере на карту добавлена метка, при клике на которой открывается балун-панель с заданным содержимым.

Для задания стиля метки из набора встроенных стилей используется опция preset. В API предустановлено пять различных стилей для меток (в скобках указаны соответствующие ключи):

  • Метки с текстом ('islands#icon');
  • метки, тянущиеся под текст ('islands#stretchyIcon');
  • метки с точкой в центре ('islands#dotIcon');
  • метки в виде кругов ('islands#circleIcon');
  • метки в виде кругов с точкой в центре ('islands#circleDotIcon').

Для каждого стиля на выбор предоставлено 16 цветов. API позволяет задавать меткам также собственные цвета для всех стилей, кроме 'islands#stretchyIcon'. Как задавать меткам собственные цвета см. в следующем примере. 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Метка и балун-панель</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="placemark_balloon.js" type="text/javascript"></script>
        <style type="text/css">
            #YMapsID {
                width: 350px;
                height: 300px;
            }
        </style>
    </head>
    <body>
        <div class="hero-unit">
            <div class="container">
                <div id="YMapsID"></div>
            </div>
        </div>
    </body>
</html>

ymaps.ready(function () {
    var myMap = new ymaps.Map("YMapsID", {
        center: [55.733835, 37.588227],
        zoom: 12,
        // Обратите внимание, что в API 2.1 по умолчанию карта создается с элементами управления.
        // Если вам не нужно их добавлять на карту, в ее параметрах передайте пустой массив в поле controls.
        controls: [],
    });

    var myPlacemark = new ymaps.Placemark(
        myMap.getCenter(),
        {
            balloonContentBody: [
                "<address>",
                "<strong>Офис Яндекса в Москве</strong>",
                "<br/>",
                "Адрес: 119021, Москва, ул. Льва Толстого, 16",
                "<br/>",
                'Подробнее: <a href="https://company.yandex.ru/">https://company.yandex.ru</a>',
                "</address>",
            ].join(""),
        },
        {
            preset: "islands#redDotIcon",
        }
    );

    myMap.geoObjects.add(myPlacemark);
});