// 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; }