Google map Splitter layout - jquery-ui

Question

Is there is any layout like this
http://layout.jquery-dev.net/samples/gispaho/layoutintab.htm which suport google map as a contend i use the above one. i got a problem, splitter drag fails over the google map.
Ref
https://stackoverflow.com/questions/15795815/jquery-dragable-fails-over-the-google-map
what i tried is
<div id="layout" class="sun-layout" style="height: 600px;">
<div class="ui-layout-west sun-layout">
<div class="map1">
</div>
</div>
<div class="ui-layout-center sun-layout">
<div class="map2">
</div>
</div>
in Dom ready
var $layout = $("#layout"); $layout.layout({
west__size: 400 });

Answer 1

We had the same problem in our application. We just show an invisible div over the map on the start of the resize and hide it at the end. That div will temporarily stop all mouse events from reaching the map. I imagine the same technique will work on your other question. As long as there is some way to hook into the resize start and resize end events, this should be effective.
So to apply it to your situation I would alter the html as such:
<div id="layout" class="sun-layout" style="height: 600px;">
<div class="ui-layout-west sun-layout">
<div class="map-mask"></div> <!-- Your map mask -->
<div class="map1">
</div>
</div>
<div class="ui-layout-center sun-layout">
<div class="map-mask"></div> <!-- Your map mask -->
<div class="map2">
</div>
</div>
Then I would add the following events to jquery UI layout:
.layout({
...
onresize_start: function(){
$(".map-mask").show();
},
onresize_end: function(){
$(".map-mask").hide();
},
...
})
And some CSS. I don't know what context the sizing is for map, so you will need to tailor this. The idea is to get the div in a z-index higher than the map and cover it completely.
.map-mask{
height:100%;
width:100%;
position: absolute;
z-index: 1000;
}