--- metadata: - name: generator content: Diplodoc Platform v5.39.1 alternate: - https://yandex.com.tr/dev/jsapi-v2-1/doc/en/v2-1/examples/cases/placemark_hint_layout.md - https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/v2-1/examples/cases/placemark_hint_layout.md --- > **Documentation Index:** Fetch the complete configuration index at https://yandex.com.tr/dev/jsapi-v2-1/doc/ru/llms.txt # Макет хинта метки Open in CodeSandbox
ready, Map, Placemark, templateLayoutFactory

Макеты объектов можно создавать с помощью фабрики templateLayoutFactory, используя текстовые шаблоны.

В данном примере создается пользовательский макет хинта геообъекта. Макет задается геообъекту через опции.

Для того чтобы хинт автоматически сдвигал свою позицию в случае выхода за пределы контейнера карты, необходимо в его макете переопределить метод getShape(). Данный метод должен возвращать текущие размеры макета хинта.

{% list tabs %} - index.html ```html Макет хинта метки
``` - placemark_hint_layout.js ```js ymaps.ready(init); function init() { var myMap = new ymaps.Map( "map", { center: [55.76, 37.64], zoom: 10, }, { searchControlProvider: "yandex#search", } ), // Создание макета содержимого хинта. // Макет создается через фабрику макетов с помощью текстового шаблона. HintLayout = ymaps.templateLayoutFactory.createClass( "
" + "{{ properties.object }}
" + "{{ properties.address }}" + "
", { // Определяем метод getShape, который // будет возвращать размеры макета хинта. // Это необходимо для того, чтобы хинт автоматически // сдвигал позицию при выходе за пределы карты. getShape: function () { var el = this.getElement(), result = null; if (el) { var firstChild = el.firstChild; result = new ymaps.shape.Rectangle( new ymaps.geometry.pixel.Rectangle([ [0, 0], [ firstChild.offsetWidth, firstChild.offsetHeight, ], ]) ); } return result; }, } ); var myPlacemark = new ymaps.Placemark( [55.764286, 37.581408], { address: "Москва, ул. Зоологическая, 13, стр. 2", object: "Центр современного искусства", }, { hintLayout: HintLayout, } ); myMap.geoObjects.add(myPlacemark); } ``` {% endlist %}