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...

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...

• javascript
• jquery
• html

2 Answers 2

I just threw this together in a second:

http://jsfiddle/purmou/mrJtG/

It uses jQuery UI's (http://jqueryui./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./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.

I don't think this answer is valid, as jQueryUI's draggable does not work on touch devices and PicoCreator clearly stated that he needs it to work on an iPhone/iOS/Touch Interface