JSFiddle - React, Tailwind, and code Playground
HTML
<div id="map"></div>
CSS
</style>
<script type="text/javascript" src="https://api-maps.yandex.ru/2.1/?lang=ru_RU"></script>
<style>
html, body, #map {
width: 100%; height: 100%; padding: 0; margin: 0;
}
JavaScript
ymaps.ready(function () {
var myMap = new ymaps.Map('map', {
center: [55.751574, 37.573856],
zoom: 9
}, {
searchControlProvider: 'yandex#search'
}),
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: [-3, -42]
});
function setFocusOnPlacemark(placemark, offset) {
var map = placemark.getMap();
var zoom = map.getZoom();
var projection = map.options.get('projection');
var center = placemark.geometry.getCoordinates();
var pixelCenter = projection.toGlobalPixels(center, zoom);
if(offset) {
pixelCenter = pixelCenter.map(function (point, index) {
return point + offset[index];
});
}
map.setCenter(projection.fromGlobalPixels(pixelCenter, zoom));
}
myPlacemark.events.add('click', function (e) {
e.preventDefault(); // don't open balloon
setFocusOnPlacemark(e.get('target'), [0, 100])
})
myMap.geoObjects.add(myPlacemark);
});