<html>
<head>
    <title>Примеры. Метка</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- Если вы используете API локально, то в URL ресурса необходимо указывать протокол в стандартном виде (http://...)-->
    <script src="//api-maps.yandex.ru/2.1/?lang=ru_RU" type="text/javascript"></script>
  <style>
        html, body, #map {
            width: 100%; height: 400px; padding: 0; margin: 0;
        }
    </style>
</head>
<body>

    <div id="map"></div>

</body>
</html>

.ymaps-layers-pane {
    -webkit-filter: grayscale(100%);
}

        ymaps.ready(function () {
            var myMap = new ymaps.Map('map', {
                center: [55.738307,37.630332],
                zoom: 17
            }, {
                searchControl: 'yandex#search'
            });
      
 var positions = myMap.getGlobalPixelCenter();
var offsetPos = myMap.options.get('projection').fromGlobalPixels([ positions[0] - 100, positions[1] ], myMap.getZoom());
          
                myPlacemark = new ymaps.Placemark(offsetPos, {
                    balloonContent: 'г. ул. Примерная д. 13А'
                }, {
                    iconLayout: 'default#image',
                    iconImageHref: 'https://www.pngrepo.com/png/167549/180/map-locator.png',
                    iconImageSize: [81, 81],
                    iconImageOffset: [-40, -40]
                });

            myMap.geoObjects
                .add(myPlacemark);
            myMap.controls.remove('searchControl');      myMap.behaviors.disable('scrollZoom');
      
        });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js