JQuery draggable google map

Question

gmapを使ってdivオーバーレイを作成し、jqueryプラグインを使ってdraughableにしました。 しかし、マップ上でpullとdrag機能を使用しようとするとdiv全体が移動します。 これを修正する方法はありますか？

Answer 1

ちょうど別のdivでGoogleマップをラップし、ハンドルを割り当てます。ここにコードと実際の例があります。

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'}); 
}); 

例：

http://jsfiddle.net/semTg/