Jquery可調整大小不能與谷歌地圖工作

Question

我想坐在谷歌地圖可調整的div在屏幕的底部，但它不想出現。

有沒有人用谷歌地圖可調整大小的JQuery，並發現實施困難？

Visual representation of how i want it to appear on the page

到目前爲止，我已經安裝here:fiddle

這是我當前的代碼：

HTML

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDmIz3c-nQR5BkM2WbFyoUwc94bLMc36Nw&sensor=false"></script> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
    <link rel="stylesheet" href="/resources/demos/style.css"> 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 

    <div id="wrapper"> 
    <div class="n-resizable-topcontent"> 
     <div> some text here </div> 
     <div> some text here </div> 
     <div> some text here </div> 
     <div> some text here </div> 
     <div> some text here </div> 
     <div> some text here </div> 
     <div> some text here </div> 
     <div> some text here </div> 
     <div> some text here </div> 
     <div> some text here </div> 
     <div> some text here </div> 
     <div> some text here </div> 
     <div> some text here </div> 
     <div> some text here </div> 
     <div> some text here </div> 
     <div> some text here </div> 
     <div> some text here </div> 
     <div> some text here </div> 
     </div> 
    <div class="resizable"> 
     <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div> 
     <div class="maps" id="maps"></div> 
     </div> 
    </div> 

CSS

#wrapper { 
    position: fixed; 
    width: 100%; 
    height: 100vh; 
} 

.n-resizable-topcontent { 
    height: 70%; 
    background-color: #0098ff; 
    overflow:scroll; 
} 
.resizable { 
    width: 100%; 
    height: 30%; 
    } 
#ngrip { 
    width: 100%; 
    background-color: #ffffff; 
    height: 8px; 
    border: 1px solid #000000; 
} 

.maps { 
    width: 100%; 
    height: 100%; 
    z-index: 9999; 
} 
#maps { 
    max-width: none; 
} 

JS

$(".resizable").resizable({ 
    handles: { 
    'n': '#ngrip' 
    }, 
    resize: function(event, ui) { 
      // parent 
     var parent = ui.element.parent(); 
     var parent_height = parent.height(); 

     // Get the min value of height or 70% of parent height 
     // Get the max value of height or 30% of parent height 
     var height = Math.min(ui.size.height, parent_height * 0.7); 
     height = Math.max(height, parent_height * 0.3); 

     // Set height for resizable element, and do not change top position. 
     // Instead the previous element - content container - will be adjusted. 
     ui.size.height = height; 
     ui.position.top = 0; 

     // make the content container's height 100% of parent, less .resizable 
     ui.element.prev('.n-resizable-topcontent').height(parent_height - height); 
    } 
}); 

//maps 

function initMap() { 
    // Create a map object and specify the DOM element for display. 
    var map = new google.maps.Map(document.getElementById('maps'), { 
    center: {lat: -34.397, lng: 150.644}, 
    scrollwheel: false, 
    zoom: 8 
    }); 
} 

Answer 1

你是不是調用initMap功能。

updated fiddle (calls initMap when the API has loaded)

代碼片斷：

#wrapper { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100vh; 
 
} 
 
.n-resizable-topcontent { 
 
    height: 70%; 
 
    background-color: #0098ff; 
 
    overflow: scroll; 
 
} 
 
.resizable { 
 
    width: 100%; 
 
    height: 30%; 
 
} 
 
#ngrip { 
 
    width: 100%; 
 
    background-color: #ffffff; 
 
    height: 8px; 
 
    border: 1px solid #000000; 
 
} 
 
.maps { 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 9999; 
 
} 
 
#maps { 
 
    max-width: none; 
 
}

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDmIz3c-nQR5BkM2WbFyoUwc94bLMc36Nw&callback=initMap" async defer></script> 
 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css"> 
 
<script src="//code.jquery.com/jquery-1.10.2.js"></script> 
 
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
 

 
<div id="wrapper"> 
 
    <div class="n-resizable-topcontent"> 
 
    <div>some text here</div> 
 
    <div>some text here</div> 
 
    <div>some text here</div> 
 
    <div>some text here</div> 
 
    <div>some text here</div> 
 
    <div>some text here</div> 
 
    <div>some text here</div> 
 
    <div>some text here</div> 
 
    <div>some text here</div> 
 
    <div>some text here</div> 
 
    <div>some text here</div> 
 
    <div>some text here</div> 
 
    <div>some text here</div> 
 
    <div>some text here</div> 
 
    <div>some text here</div> 
 
    <div>some text here</div> 
 
    <div>some text here</div> 
 
    <div>some text here</div> 
 
    </div> 
 
    <div class="resizable"> 
 
    <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div> 
 
    <div class="maps" id="maps"></div> 
 
    </div> 
 
</div> 
 
<script> 
 
    $(".resizable").resizable({ 
 
    handles: { 
 
     'n': '#ngrip' 
 
    }, 
 
    resize: function(event, ui) { 
 
     // parent 
 
     var parent = ui.element.parent(); 
 
     var parent_height = parent.height(); 
 

 
     // Get the min value of height or 70% of parent height 
 
     // Get the max value of height or 30% of parent height 
 
     var height = Math.min(ui.size.height, parent_height * 0.7); 
 
     height = Math.max(height, parent_height * 0.3); 
 

 
     // Set height for resizable element, and do not change top position. 
 
     // Instead the previous element - content container - will be adjusted. 
 
     ui.size.height = height; 
 
     ui.position.top = 0; 
 

 
     // make the content container's height 100% of parent, less .resizable 
 
     ui.element.prev('.n-resizable-topcontent').height(parent_height - height); 
 
    } 
 
    }); 
 

 
    //maps 
 

 
    function initMap() { 
 
    // Create a map object and specify the DOM element for display. 
 
    var map = new google.maps.Map(document.getElementById('maps'), { 
 
     center: { 
 
     lat: -34.397, 
 
     lng: 150.644 
 
     }, 
 
     scrollwheel: false, 
 
     zoom: 8 
 
    }); 
 
    } 
 
</script>