---
metadata:
- name: generator
content: Diplodoc Platform v5.39.1
alternate:
- https://yandex.com/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/placemark_balloon.md
- https://yandex.com/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/placemark_balloon.md
---
> **Documentation Index:** Fetch the complete configuration index at https://yandex.com/dev/jsapi-v2-1/doc/en/llms.txt
# 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.
{% list tabs %}
- index.html
```html
Examples. Placemark and balloon panel.
```
- placemark_balloon.js
```js
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: [
"",
"Yandex office in Moscow",
"
",
"Address: 119021, Moscow, Lva Tolstogo Street, 16",
"
",
'For more information, see: https://company.yandex.com',
"",
].join(""),
},
{
preset: "islands#redDotIcon",
}
);
myMap.geoObjects.add(myPlacemark);
});
```
{% endlist %}