Setting Google API Maps (and charts) to 100% height

Question

I am trying to make my map have a 100% height using Google Maps API. (In the past I've wanted to make my Google Charts API charts have percentage heights also)

Everywhere I've read so far says to set html and body heights to 100% first. I've done that, but the map won't show up unless I make its container have a fixed height.

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Map</title>
        <style>
            html, body{
                width:100%;
                height:100%;
            }
            .map{
                width:100%;
                height:100%;
            }
        </style>
    </head>
    <div class="mainWrap">
        <div id="mainMap" class="map">
        </div>
    </div>
    </div>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>


    <script  type="text/javascript">

        /////Global variables and arrays/////
            var markerArray = [];
            var myID;
            var mapZoom = 9; /

            var mapCenterLat = 41.82454868;
            var mapCenterLon = -87.6341629;

        //Initiate the initialize function to build map, after page loads
        google.maps.event.addDomListener(window, 'load', initialize); //when window loads, start initialize function (below)

        //Google API Initialize function that builds map
        function initialize() {
            /////Variables/////
            var infoWindow = new google.maps.InfoWindow({
            });
            var map_canvas = document.getElementById('mainMap');    
            var map_options = {
                center: new google.maps.LatLng(mapCenterLat,mapCenterLon),
                zoom: mapZoom, 
                mapTypeId: google.maps.MapTypeId.TERRAIN 
            };  

            //Draw the map 
            var map = new google.maps.Map(map_canvas, map_options);


        } //End initialize()



    </script>
</html>

possible duplicate of [Custom Google Map won't show in div element](http://stackoverflow.com/questions/23469925/custom-google-map-wont-show-in-div-element) — geocodezip, Sep 21 '14 at 23:51
possible duplicate of [Google Maps V3, Map won't display when wrapped in a second div](http://stackoverflow.com/questions/10675075/google-maps-v3-map-wont-display-when-wrapped-in-a-second-div) — geocodezip, Sep 21 '14 at 23:52
No, because neither of those mention positioning, which was apparently the problem in my case. — , Sep 22 '14 at 03:55

RunsnbunsN · Answer 1 · 2014-09-21T23:34:58.613

0

Looks like you are missing a position: absolute; in your CSS for your map div

Percentage heights/widths only work if you give your element a position too.

for having the div all over the browser window:

.map {
position: absolute;
top: 0px;
left: 0px;
width:100%;
height:100%;
}

edited Sep 21 '14 at 23:34

answered Sep 21 '14 at 23:29

RunsnbunsN

88
1
11

Thanks. Absolute position works. Why doesn't relative position work? Suppose I wanted a div to show after the map? – Sep 21 '14 at 23:34
if you use absolute positioning, width and height, aswell as top and left are derived from the whole document, relative positioning also means relative height and width. – RunsnbunsN Sep 21 '14 at 23:50

Setting Google API Maps (and charts) to 100% height

1 Answers1