Placemark and balloon panel

Open in CodeSandbox

In this example, a placemark is added to the map that, when clicked, opens a balloon panel with the specified content.

To set the placemark style from a set of built-in styles, use the preset option. The API has five preset styles for placemarks (the corresponding keys are shown in parentheses):

  • placemarks with text ('islands#icon');
  • placemarks that stretch to fit the text ('islands#stretchyIcon');
  • placemarks with a dot in the center ('islands#dotIcon');
  • placemarks in the form of circles ('islands#circleIcon');
  • placemarks in the form of circles with a dot in the center ('islands#circleDotIcon').

For each style there are 16 colors. The API allows you to also specify custom colors for placemarks for all styles, except 'islands#stretchyIcon'. For information on how to set custom colors for placemarks, see the following example. 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Examples. Placemark and balloon panel.</title>
        <meta
            http-equiv="Content-Type"
            content="text/html; charset=UTF-8"
        />
        <!--
        Set your own API-key. Testing key is not valid for other web-sites and services.
        Get your API-key on the Developer Dashboard: https://developer.tech.yandex.ru/keys/
    -->
        <script
            src="https://api-maps.yandex.ru/2.1/?lang=en_US&amp;apikey=<your API-key>"
            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,
        /**
         * Please note that in the API 2.1, the map is created with controls by default.
         * If you don't need to add them to the map, pass an empty array in the "controls" field in its parameters.
         */
        controls: [],
    });

    var myPlacemark = new ymaps.Placemark(
        myMap.getCenter(),
        {
            balloonContentBody: [
                "<address>",
                "<strong>Yandex office in Moscow</strong>",
                "<br/>",
                "Address: 119021, Moscow, Lva Tolstogo Street, 16",
                "<br/>",
                'For more information, see: <a href="https://company.yandex.com">https://company.yandex.com</a>',
                "</address>",
            ].join(""),
        },
        {
            preset: "islands#redDotIcon",
        }
    );

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