--- 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/en/llms.txt # The layout of the placemark hint Open in CodeSandbox
ready, Map, Placemark, templateLayoutFactory

Object layouts can be created using the templateLayoutFactory factory and text templates.

This example creates a custom hint layout for the geo object. The layout is set for the geo object via the options.

In order for the hint to automatically shift its position if it goes outside of the map container, redefine the getShape() method in its layout. This method should return the current size of the hint layout.

{% list tabs %} - index.html ```html Examples. Custom hint layout
``` - 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", } ), /** * Creating a layout for hint content. * The layout is created through the layout factory using a text template. */ HintLayout = ymaps.templateLayoutFactory.createClass( "
" + "{{ properties.object }}
" + "{{ properties.address }}" + "
", { /** * Defining the getShape method, * which will return the size of the hint layout. * This is necessary in order for the hint to automatically * move its position when going off the map. */ 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: "Moscow, Zoologicheskaya Street, 13u2", object: "Contemporary Art Center", }, { hintLayout: HintLayout, } ); myMap.geoObjects.add(myPlacemark); } ``` {% endlist %}