Menu
I have a simple layout where the body takes the full height minus height of the footer + height of the header. This is achieved with flexbox model (http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/)
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0; /* to avoid scrollbars */
}
#wrapper {
display: flex; /* use the flex model */
min-height: 100%;
flex-direction: column; /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}
#header {
background: yellow;
height: 100px; /* can be variable as well */
}
#body {
flex: 1;
border: 1px solid orange;
height: 100%;
}
#footer {
background: lime;
}
#map-canvas {
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="wrapper">
<div id="header">Title</div>
<div id="body">
<div id="map-canvas"></div>
</div>
<div id="footer">
Footer<br />
of<br />
variable<br />
height<br />
</div>
</div>
</body>
</html>
I am facing a problem with google maps. I cannot initialise it into the canvas div because (I assume that's the reason) it does not have a defined height.
Is there any way to make google maps appear?
Thanks
507
By default, a flex container has the following width and height assigned. width: auto; height: auto; But you can set a fixed height and width to the flex container.
Getting the child of a flex-item to fill height 100%Set position: relative; on the parent of the child. Set position: absolute; on the child. You can then set width/height as required (100% in my sample).
A flexbox item can be set to a fixed width by setting 3 CSS properties — flex-basis, flex-grow & flex-shrink. flex-basis : This property specifies the initial length of the flex item. flex-grow : This property specifies how much the flex item will grow relative to the rest of the flex items.
Instead, developers can build a flexible container, flexbox for short. It's great for mobile screens and responsive content for dynamic layouts and webapps. This guide will cover the fundamentals of CSS flexbox usage and some helpful resources for digging deeper into the topic.
height: 100% is not working as expected. You can use absolute positioning to size the Google map:
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644)
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);html, body {
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
display: flex;
min-height: 100%;
flex-direction: column;
}
#header {
background: yellow;
height: 100px;
}
#body {
flex: 1;
background: orange;
position: relative;
}
#footer {
background: lime;
}
#map-canvas {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<div id="wrapper">
<div id="header">Title</div>
<div id="body">
<div id="map-canvas"></div>
</div>
<div id="footer">
Footer<br/>of<br/>variable<br/>height
</div>
</div>Set the #map-canvas height to the height of the #body element in JavaScript before creating your map.
var mapCanvas = document.getElementById('map-canvas');
mapCanvas.style.height = document.getElementById('body').clientHeight + 'px';
jQuery version:
$('#map-canvas').height($('#body').height());
JSFiddle demo
32
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
