How to get Google Map to fill div with Bootstrap

问题

I am looking for a better solution.

I am trying to fill the middle of the browser screen with a Google Map. (between menu and footer) On IE the below code works fine. Sometimes it works for Chrome but almost always only shows the map in 25% of the map_canvas on Firefox.

Now after the page renders the entire map_canvas div is grey and fills the area so the 100% works in all browsers. If I resize the browser the map fills the whole area so on resize event it works in all browsers. The problem is in Chrome and Firefox the map only takes up about 25% of the grey area of the map_canvas div.

So the only thing I can think of is in IE the CSS for the div happens before the map is rendered and in Chrome and Firefox it happens after the map is rendered. I don't know if this is because I am using bootstrap or a problem with something else.

I have a temp work around using this code. By setting the map_canvas height to the document height minus the menu/footer the map always displays in all browsers. The problem with this is if the user resizes the screen the map does not resize which is awkward and looks bad. I guess in desperation I could overload the windows resize event and just keep changing the map_canvas size but that sounds like a ugly hack too. Looking for something less ugly.

$("#map_canvas").css("min-height", $(document).height() - 70);

Browser sudo code

<!DOCTYPE html>
<html lang="en">
<head>
<!-- header stuff -->
<style>
<!-- in CSS file -->
#map_canvas
{
    height: 100%;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
</style>
</head>
<body>
    <header class="hidden-print">
        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
            <div class="container">
        menus
        </div>
    </div>
    </header>
    <div class="container-fluid">
    <div id="map_canvas" class="map_canvas">
    </div>
    </div>
    <footer class="navbar-default navbar-fixed-bottom">
        <div class="row">
        stuff
        </div>
    </footer>
        <script type="text/javascript">
        $(function () {
        var mapDiv: HTMLElement = document.getElementById("map_canvas");
        /// Set control options for map
        var zoptions = {
            position: google.maps.ControlPosition.TOP_RIGHT,
            style: google.maps.ZoomControlStyle.SMALL
        };
        /// Position of map using coord that were passed else do nothing.
        var pos = new google.maps.LatLng(40.716948, -74.003563);
        /// Set basic map options using above control options
        var options: google.maps.MapOptions = {
            zoom: 10,
            zoomControlOptions: zoptions,
            mapTypeId: google.maps.MapTypeId.TERRAIN,
            center: pos
        };
        this.map = new google.maps.Map(mapDiv, options);
        })
       </script>
</body>

回答1:

When you know the height of header and footer it's not complicated.

Set the height of html,body , .container-fluid and #map_canvas to 100%;

For .container-fluid additionaly set :

width:100%;
position:absolute;
top:0;

Now #map_canvas will have the same size as the browsers viewport. ...But the map is partially covered by header & footer.

To fix it set the border-width of #map_canvas to:

top:height of the header
bottom:height of the footer

#map_canvas now still will be covered by header & footer, but it doesn't matter, the covered parts are the border

complete CSS:

html, body, .container-fluid, #map_canvas {
    height:100%;
}
.container-fluid {
    width:100%;
    position:absolute;
    top:0;
    padding:0;
}
#map_canvas {
    border-top:50px solid #fff;
    border-bottom:20px solid #fff;
}
header {
    height:50px;
}
footer {
    height:20px;
}

Demo: http://jsfiddle.net/doktormolle/ued0j2vs/

来源：https://stackoverflow.com/questions/27295617/how-to-get-google-map-to-fill-div-with-bootstrap

标签

twitter-bootstrap

google-maps