试图复制谷歌地图的幻灯片面板与地图v3和jquery

我正在尝试创建一个类似于maps.google.com左侧当前使用的幻灯片面板我试图复制的行为与这个面板(显示在谷歌地图上)

• 当面板打开时，地图中心将保持静止
• 地图控件(缩放，缩放等)不与面板重叠，因为它们会随着面板的扩展而移动。

我最初认为我可以绝对地在地图上放置一个div，但这覆盖了地图控件，例如(缩放，缩放等)，并且将它们放置在其他地方是不可能的。

我的其他两个尝试几乎都在那里，但不幸的是不完全。请注意，为了演示目的，代码示例被快速地组合在一起。

尝试1:

http://jsfiddle.net/fdwGd/5/

两个div，一个是滑动面板，另一个保存地图内容，都向左浮动。白色面板上的"关闭"/"打开"按钮有一个点击处理程序，用于动画化幻灯片面板的边距变化以隐藏它。地图div的宽度平行扩展以填充空白区域。这里的问题是，当展开面板时，整个地图向右移动(在jsfiddle示例中单击"打开"/"关闭")将面板定位到屏幕的右侧解决了这个问题(在html元素上添加了overflow: hidden)，尽管这不符合我的设计要求。

还需要注意的是，使用google maps的panby(x, y)函数来修复像素跳跃是非常笨拙的，所以也不是一个真正的选择

第二次尝试:

http://jsfiddle.net/63uxt/1/

所以我想我应该尝试用编程的方式添加一个自定义的谷歌地图控件(控件是有问题的滑动面板)，并使用定位选项来让其他控件很好地适应我的滑动面板。一开始我认为它是有效的，直到我意识到其他控件不会在滑动面板被隐藏后重新定位。移动地图会更新本地控件(缩放等)的位置，但这是不可行的。

有什么想法?由于