マップが動作しないリサイズ可能なjquery

Question

私は2つのネストされたdivを持っていますが、マップはサイズ変更可能にしたいと考えています。私がなぜ "n"のハンドルが親の70％に拡大するのを見ることができないのでしょうか？ 相続人は私のfiddle:

HTML

<div class="content" id="wrapper"> 
<div class="search-div" id="search"> 
    <h4>Heading</h4> 
    <h4>Heading</h4> 
    <h4>Heading</h4> 
    <h4>Heading</h4> 
    <h4>Heading</h4> 
    <h4>Heading</h4> 
    <h4>Heading</h4> 
    <h4>Heading</h4> 
    <h4>Heading</h4> 
    <h4>Heading</h4> 
    </div> 
<div class="maps" id="maps"> 
</div> 

JS

$("#maps").resizable({ 
    handles: "n", 
    maxHeight: "70%", 
    minHeight: "30%" 
}); 

Answer 1

あなたはこの1試すことができます。

$(document).ready(function(){ 
var map; 
var mapOptions = { 
     zoom: 1, 
     center: new google.maps.LatLng(13.004558, 77.6017), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 

map = new google.maps.Map(
     document.getElementById('map-canvas'), 
     mapOptions); 

$("#maps").css("height", "120px"); 
google.maps.event.trigger(map, "resize"); 
}); 

DEMO HERE