Untitled

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div style="width: 100px; height: 100px; position: absolute; background: #666;" class="map">MAP</div>
</body>
</html>

<script type="text/javascript">
$(document).click(function (e) {
    debugger;
    var t = e.target;
    if ($(t).hasClass('map')) {
        if ($(t).hasClass('shown')) {
            // Прокладываем маршрут, карта уже показана
        } else {
            // Покажем карту
            $(t).addClass('shown');
        }
    } else {
        // Карту скроем
        $(t).removeClass('shown');
    }
});
</script>

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
    <div style="width: 100px; height: 100px; position: absolute; background: #666;" class="map-2"></div>
</body>
</html>

<script type="text/javascript">
$(document).click(function(e) {
    debugger;
    var t = e.target;
    if ($(t).hasClass('map-2')) {
        if ($(t).hasClass('shown')) {
            window.open("https://www.google.com.ua/maps/place/%D0%B2%D1%83%D0%BB%D0%B8%D1%86%D1%8F+%D0%93%D0%B0%D0%B3%D0%B0%D1%80%D1%96%D0%BD%D0%B0,+20%D0%91,+%D0%91%D1%80%D0%BE%D0%B2%D0%B0%D1%80%D0%B8,+%D0%9A%D0%B8%D1%97%D0%B2%D1%81%D1%8C%D0%BA%D0%B0+%D0%BE%D0%B1%D0%BB.,+%D0%A3%D0%BA%D1%80%D0%B0%D0%B8%D0%BD%D0%B0,+07400/@50.509616,30.7880527,17z/data=!3m1!4b1!4m5!3m4!1s0x40d4d964de41ddc1:0x576661f01912c3f8!8m2!3d50.5096126!4d30.7902414", "_blank");
        } else {
            $('.map-2').animate({
                left: '10px'
            }, 400);
            $('body').animate({
                left: '0px'
            }, 400);
            $(t).addClass('shown');
        }
    } else {
        $('.map-2').animate({
            left: '-180px'
        }, 600);
        $('body').animate({
            left: '0px'
        }, 600);
        $(t).removeClass('shown');
    }
});
</script>