Maps API v3 Map in Flexbox design

http://stackoverflow.com/questions/27208987

by upsidown

HTML

<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
        <br/>
    </div>
</div>

CSS

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;
}

JavaScript

var map;

function initialize() {

    document.getElementById('map-canvas').style.height = document.getElementById('body').clientHeight + 'px';

    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);