Draggable Inner Frame similar to google maps

Question

Been playing with the thought of javascript game. Especially RTS types... the question is as followed.

How do i work on creating a draggable inner frame, similar to google maps?

The idea, is that there is an overlaying UI, and a much larger draggable map underneath. Sort of similar to your usual RTS games. However i been trying to figure a simple work around for such an interface. Is there a ready made API for something similar?, or would i need to do it from scratch?.

If possible, it should work on an iphone too =X

Additional info: From what i know so far, it seems like google maps uses a draggable element placed ontop of the map, detecting the drag events. What i dun understand however, is how, it is still able to hit objects beneath it...

Answer 1

I just threw this together in a second:

http://jsfiddle.net/purmou/mrJtG/

It uses jQuery UI's (http://jqueryui.com/home) "Draggable" function. Here's the HTML and CSS:

#range {
    width:400px;
    height:400px;
    overflow:hidden;
    border:1px solid black;
}

<div id="range">
    <img src="http://img1.loadtr.com/k-483417-Map_of_the_World.gif" id="map" />
</div>

And here's the jQuery:

jQuery(document).ready(function() {
    jQuery("#map").draggable(); 
});

Take a look at the Draggable page here for further exploration.