jQuery Image Draggable with Marker Draggable

I’m trying to use jQuery Draggable on image background and it’s work.

I can drag the image everywhere.

Now I have div marker to identify every location on the image. In example code I put Michael Office that should be on Michael area (see on the image). But I can’t figure it out how to make the marker place into Michael Area.

My question is it possible to put the marker into Michael Area and also when I drag anywhere, the Michael Area marker should be keep there.

$(document).ready(function(){
    const container = document.querySelector('.img');
    const containerSize = container.getBoundingClientRect();

    let imagePosition = { x: 50, y: 50 };
    let cursorPosBefore = { x: 0, y: 0 };
    let imagePosBefore = null;
    let imagePosAfter = imagePosition;

    // Helpers
    const minMax = (pos) => (pos < 0) ? 0 : (pos > 100) ? 100 : pos;
    const setNewCenter = (x, y) => {
      imagePosAfter = { x: x, y: y }; 
      container.style.backgroundPosition = `${x}% ${y}%`;
    };

    const getImageZoom = () => {
      return new Promise((resolve, reject) => {
        let actualImage = new Image();
        actualImage.src = $('#img').css('background-image').replace(/"/g,"").replace(/url(|)$/ig, "");
        actualImage.onload = function() {
          resolve({
            x: zoomX = this.width / containerSize.width - 1,
            y: zoomY = this.height / containerSize.height - 1
          });
        }
      });
    }
        
    const addEventListeners = (zoomLevels) => {container.addEventListener('mousedown', function(event) {
          cursorPosBefore = { x: event.clientX, y: event.clientY };
          imagePosBefore = imagePosAfter; // Get current image position
        });

        container.addEventListener('mousemove', function(event) {
            event.preventDefault();
            
            if (event.buttons === 0) return;

            let newXPos = imagePosBefore.x + ((cursorPosBefore.x - event.clientX) / containerSize.width * 100 / zoomLevels.x);
            let newYPos = imagePosBefore.y + ((cursorPosBefore.y - event.clientY) / containerSize.height * 100 / zoomLevels.y);

            setNewCenter(minMax(newXPos), minMax(newYPos));
        });
    };

    getImageZoom().then(zoom => addEventListeners(zoom));
});
<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Manrope';
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
        }
        
        #page {
            margin: 10px;
            display: flex;
        }
        
        #page .summary {
            width: 450px;
        }
        
        #page .summary .map-location {
            font-size: 25px;
            font-weight: bold;
            padding: 10px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        
        #page .summary table {
            width: 100%;
            border-collapse: collapse;
        }
        
        #page .summary table th {
            background: #f1f1f1;
            padding: 10px;
            border-bottom: 1px solid #c0c0c0;
            font-size: 14px;
        }
        
        #page .summary table td {
            padding: 10px;
        }
        
        #img {
            position: relative;
            width: calc(100% - 50px);
            height: calc(100vh - 25px);
            background-position: 50% 50%;
            background-image: url('https://live.staticflickr.com/3312/3642071233_162baf0108_h.jpg');
            cursor: move;
            border: 3px solid #5e5e5e;
        }

        #img:active {
            border-color: #007fff;
        }
        
        .table {
            display: flex;
            flex-flow: column;
        }
        
        .table-details {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
        }
        
        .scroll-helper {
            height: calc(100vh - 75px);
            overflow-y: scroll;
        }
        
        .tbl-data th {
            position: sticky;
            top: 0;
        }
        
        .tbl-data tr {
            border-bottom: 1px solid #e7e7e7;
        }
        
        .pin {
            position: absolute;
            left: 10px;
        }
        </style>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    </head>
    
    <body>
        <div id="page">
            <div class="img" id="img">
                <div class="pin" id="pin">Michael Office</div>
            </div>
            
        </div>
    </body>
</html>