jQuery可拖动的谷歌地图

【问题标题】：JQuery draggable google mapjQuery可拖动的谷歌地图
【发布时间】：2011-09-17 06:40:37
【问题描述】：

我有一个带有 gmap 的 div 叠加层，并使用 jquery 插件使其可拖动但是当我尝试在地图上使用拉和拖动功能时，整个 div 都会移动。任何想法如何解决这个问题？

【问题讨论】：

使用 Google Maps API，默认情况下，您应该会自动获得一个可拖动、可缩放且完全可自定义的地图，类似于在他们的网站上使用它。我们需要查看您的代码。
您是要在地图上导航，还是要在页面上移动地图？

标签： jquery jquery-ui google-maps-api-3 jquery-ui-draggable

【解决方案1】：

只需将谷歌地图包装在另一个 div 中并为其分配一个句柄，这是代码和一个工作示例。

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/

【讨论】：