<style>
            .yandex-map {
                width: 100%;
            }
            .yandex-map__container {
                position: relative;
                width: 100%;
                height: 500px;
            }
            .yandex-map__overlay {
                z-index: 5000;
                position: absolute;
                top: 0;
                left: 0;
                height: 500px;
                width: 100%;
                opacity: 0;
                display: table;
                background-color: rgba(0,0,0,0.45);
                transition-duration: 0.1s;
                transition: opacity ease-in-out;
            }
            .yandex-map__overlay__message {
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                font-weight: bold;
                color: #fff;
                font-size: 22px;
            }
        </style>
<div class="yandex-map">
            <div id="yandex-map" class="yandex-map__container">
                <div class="yandex-map__overlay">
                    <div class="yandex-map__overlay__message">Чтобы переместить карту, проведите по ней двумя пальцами</div>
                </div>
                <script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3Af3ecffa7b452ca5db57642a13d7bd0e0f4fc51ec04ec587687b9886fd7964eac&amp;width=100%25&amp;height=500&amp;lang=ru_RU&amp;scroll=false"></script>
            </div>
        </div>
        <script>
            (function ($) {
                $(document).ready(function() {
                    function toggleMapOverlayVisibility(status) {
                        status && toggleMapOverlay(status);
                        $('.yandex-map__overlay').css({
                            'opacity' : status ? 1 : 0,
                        });
                    }

                    function toggleMapOverlay(status) {
                        $('.yandex-map__overlay').toggle(status);
                    }

                    function isOverlayEvent(event) {
                        return $(event.target).hasClass('yandex-map__overlay__message');
                    }

                    function getOverlayEventTarget(event) {
                        var target = false;
                        toggleMapOverlay(false);
                        if (event.touches && event.touches[0]) {
                            target = document.elementFromPoint(event.touches[0].clientX, event.touches[0].clientY);
                        }
                        toggleMapOverlay(true);
                        return target;
                    }

                    function cloneEventObj(eventObj, overrideObj) {
                        if (!overrideObj) {
                            overrideObj = {};
                        }
                        function EventCloneFactory(overProps) {
                            for (var x in overProps) {
                                this[x] = overProps[x];
                            }
                        }
                        EventCloneFactory.prototype = eventObj;
                        return new EventCloneFactory(overrideObj);
                    }

                    function cloneEvent(event, target) {
                        var clone = new event.constructor(event.type, event);
                        clone.target = target;
                        return clone;
                    }

                    var lastTarget = null;

                    window.addEventListener("touchstart", function(event) {
                        if (isOverlayEvent(event)) {
                            var target = lastTarget = getOverlayEventTarget(event);
                            if (target) {
                                target.dispatchEvent(cloneEvent(event, target));
                            } else {
                                toggleMapOverlayVisibility(false);
                            }
                        }
                    }, true);

                    window.addEventListener("touchmove", function(event) {
                        if (isOverlayEvent(event)) {
                            if (lastTarget) {
                                if ($(lastTarget).is('ymaps[class*="-events-pane"]')) {
                                    if (event.touches && event.touches.length == 1) {
                                        toggleMapOverlayVisibility(true);
                                        lastTarget.dispatchEvent(new TouchEvent('touchcancel'));
                                        return;
                                    } else {
                                        toggleMapOverlayVisibility(false);
                                    }
                                }

                                var clone = cloneEvent(event, lastTarget);
                                event.stopPropagation();
                                event.returnValue = false;
                                lastTarget.dispatchEvent(clone);
                            }
                        }
                    }, true);

                    ["touchend", "touchcancel"].forEach(function(e) {
                        window.addEventListener(e, function(event) {
                            if (isOverlayEvent(event)) {
                                if (lastTarget) {
                                    lastTarget.dispatchEvent(cloneEvent(event, lastTarget));
                                    lastTarget = null;
                                }
                                toggleMapOverlayVisibility(false);
                            }
                        }, true);
                    });

                    if (!('ontouchstart' in window || navigator.msMaxTouchPoints)) {
                        toggleMapOverlay(false);
                    }
                });
            })(jQuery);
        </script>