JSFiddle - React, Tailwind, and code Playground
by Nikita Polevoy
HTML
<div id="himki"></div>
CSS
</style>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<style>
html, body, #himki {
width: 100%; height: 100%; padding: 0; margin: 0;
}
JavaScript
/* начало декоратора */
ymaps.ready(function() {
const old_Map = ymaps.Map;
ymaps.Map = function() {
var args = Array.prototype.slice.call(arguments);
args.unshift(0);
var obj = new (Function.prototype.bind.apply(old_Map, args));
document.getElementById(args[1]).yaMap = obj;
return obj;
}
});
/* конец декоратора */
ymaps.ready(function () {
var myMap = new ymaps.Map('himki', {
center: [55.751574, 37.573856],
zoom: 9
}, {
searchControlProvider: 'yandex#search'
}),
// Создаём макет содержимого.
MyIconContentLayout = ymaps.templateLayoutFactory.createClass(
'<div style="color: #FFFFFF; font-weight: bold;">$[properties.iconContent]</div>'
),
myPlacemark = new ymaps.Placemark(myMap.getCenter(), {
hintContent: 'Собственный значок метки',
balloonContent: 'Это красивая метка'
}, {
// Опции.
// Необходимо указать данный тип макета.
iconLayout: 'default#image',
// Своё изображение иконки метки.
iconImageHref: 'https://sandbox.api.maps.yandex.net/examples/ru/2.1/icon_customImage/images/myIcon.gif',
// Размеры метки.
iconImageSize: [30, 42],
// Смещение левого верхнего угла иконки относительно
// её "ножки" (точки привязки).
iconImageOffset: [-5, -38]
}),
myPlacemarkWithContent = new ymaps.Placemark([55.661574, 37.573856], {
hintContent: 'Собственный значок метки с контентом',
balloonContent: 'А эта — новогодняя',
iconContent: '12'
}, {
// Опции.
// Необходимо указать данный тип макета.
iconLayout: 'default#imageWithContent',
// Своё изображение иконки метки.
iconImageHref:...