How can I make the map draggable?

JQuery draggable google map

• I have a div overlay with a gmap on it and have used a jquery plugin to make it draggable but when i try to use the pull and drag function on the map the whole div move. Any ideas how to fix this?

• Answer:

  Just wrap the google map in another div and assign it a handle, here is the code and a working example. HTML : <div class="draggable"> <div id="handle">Handle</div> <iframe width="700px" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?q=108+S+4th+St,+Cabot,+AR+72023,+USA&amp;ie=UTF8&amp;ll=34.983948,-92.014875&amp;spn=0.012273,0.027122&amp;z=14&amp;iwloc=addr&amp;om=1&amp;output=embed&amp;s=AARTsJrKwkyz-ofBV3q5yi6SmToKlUCe8Q" style="height: 522px"></iframe> </div> Javascript : $(document).ready(function() { $('.draggable').draggable({'handle' : '#handle'}); }); Example : http://jsfiddle.net/semTg/