-1
Ich versuche Google Maps in einem resizable Div am unteren Rand des Bildschirms zu sitzen, aber es will nicht angezeigt werden.Jquery resizable funktioniert nicht mit Google Maps
Hat jemand JQuery mit Google Maps resizable verwendet und Schwierigkeiten bei der Implementierung gefunden?
Visual representation of how i want it to appear on the page
Bisher habe ich das Setup here:fiddle
Dies ist mein aktueller Code:
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
});
}