<div class="map">
    <div class='map-text'>Нажмите, чтобы<br/>разблокировать карту</div>
    <div class="map-overlay"></div>
    
    
    <script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3A5314a6bfca45a4be6695eba38f356e3beb09fc887c4d0c9be34f1f5a56498973&amp;width=100%&amp;height=454&amp;lang=ru_RU&amp;scroll=true"></script>

</div>

<style>
    .map {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column-reverse;
        justify-content: space-around;
    }
    .map-text {
        z-index: 20;
        position: absolute;
        color: white;
        font-family: system-ui;
        text-align: center;
        width: 100%;
    }
    .map-overlay {
        background-color: black;
        opacity: 80%;
        width: 100%;
        height: 100%;
        z-index: 10;
        position: absolute;
    }
    @media screen and (min-width: 479px) {
        .map-text, .map-overlay {
            display: none;
        }
    }
</style>

<script>
    $( document ).ready(function(e) {
        $(document).click(function (e) {
            if ($(e.target).closest(".map").length) {
                 $('.map-text, .map-overlay').hide()
                 
                return;
            }
            $('.map-text, .map-overlay').show()
        });
    });
</script>