Edit in JSFiddle

// Pre-select elements
var map = $("#map"),
    canvas = map.find(".map-canvas");

// Calculate canvas constraints
var maxLeft = map.width()-canvas.width(),
    maxTop = map.height()-canvas.height();

// Make canvas draggable
canvas.draggable({
    drag: function(e, ui) {
        // Check if canvas is within constraints
        if (ui.position.left > 0) {
            ui.position.left = 0;
        } else if (ui.position.left < maxLeft) {
            ui.position.left = maxLeft;
        }
        if (ui.position.top > 0) {
            ui.position.top = 0;
        } else if (ui.position.top < maxTop) {
            ui.position.top = maxTop;
        }
    }
});

// Create simple dot marker
$("<div></div>")
    .addClass("map-marker")
    .appendTo(canvas)
    .offset(function(){
        return { left: 150, top: 150 };
    })
    // Append a label
    .append("<span><- Dot</span>");

// Create draggable Google Maps pin marker
var pin =
$("<div></div>")
    .addClass("google-pin")
    .appendTo(canvas)
    .offset(function(){
        return { left: 50, top: 50 };
    })
    // Bind mouseup/down for visual confirmation of grab
    .bind({
        mousedown: function(){
            var os = pin.offset();
            pin.offset(function(){
                return { top: os.top-3 };
            });
        },
        mouseup: function(){
            var os = pin.offset();
            pin.offset(function(){
                return { top: os.top+3 };
            });
        }
    })
    // Make it draggable
    .draggable({
        start: function(e,ui){
            ui.helper.offset(function(){
                return { top: ui.offset.top-2 };
            });
        },
        container: canvas
    });

<div id="map">
    <div class="map-canvas"></div>
</div>

#map {
    position: relative;
    width: 300px;
    height:300px;
    overflow:hidden;
}

.map-canvas {
    position: absolute;
    background: url(http://lab.qacode.com/map/map.jpg);
    width: 883px;
    height: 519px;
}

#map .ui-draggable-dragging {
    cursor: -moz-grabbing;
    cursor: -webkit-grabbing;
    cursor: grabbing;
}

.map-marker {
    width: 0px;
    height: 0px;
    background-color: red;
    border: 3px solid red;
    -moz-border-radius: 2px;
    border-radius: 3px;
    overflow: visible;
}

.map-marker span {
    position: absolute;
    top: -10px;
    left: 10px;
    width: 100px;
}

.google-pin {
    background: url(http://wiki.fishcakes.biz/images/Google_Maps_Marker.png) no-repeat;
    height: 37px;
    width: 34px;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    cursor: grab;
}