javascript - 可调整大小的 jquery 与 map 不工作

Question

我有 2 个嵌套的 div，我希望“ map ”可以调整大小，但是在堆栈上进行各种查看后，代码似乎对我不起作用。为什么我看不到“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

你可以试试这个:

$(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