Google Maps Height 100% of Div Parent

Set Google Maps Container DIV width and height 100%

You have to set all parent containers to a 100% width if you want to cover the whole page with it. You have to set an absolute value at width and height for the #content div at the very least.

body, html {
  height: 100%;
  width: 100%;
}

div#content {
  width: 100%; height: 100%;
}

How to get a google map to use 100% of its parent container?

Google says:

Unless you specify a size explicitly for the map using GMapOptions in the constructor, the map implicitly uses the size of the container to size itself.

So set the size of your map container fill all available space:

<div id="map2" style="width: 100%; height: 100%"></div>

Google Maps not showing despite setting parent div width and height to 100%

Add a fixed height to the element with id map-canvas just to see if its working

Google maps doesn't appear when i set the height to 100%

The reason is you're not setting any height/width for body.

#body {  //wrong selector
    height: 100%;
}

#container {
    height: 100%;
}

Always use

html, body {
  width: 100%;
  height: 100%;
}

Google Maps with height=100% and margin top

If you want it full height of the viewport just do 100vh.

So we remove the size of the bar.

height: calc(100vh - 100px)

Google Maps 100% height not working

Quickest solution is the one you referenced. The problem may be you not also targeting the map. Here is the simplest solution (sorry for messy map in the fiddle - side project I'm working on):

jsFiddle

html, body, #map {
    height: 100%;
    margin: 0px;
}

height=100% not rendering the google maps api

The reason why 100% doesn't work is because the map needs to send you images at a specific ratio (fixed width & height). Now I might be guessing here, but that's what I think happens.

Since I had a similar problem, where my map was hidden inside a tab, I wrote this function to calculate the width & height or a ratio. Then whatever size of the container, the map was in, it would adjust. It uses jQuery so I just thought I'd post it to get the idea.

    /**
     * Calculate the dimensions
     */
    calculateMap: function () {
        var self = this,
            parent = this.map.parent(), // jQuery obj
            w, h, id, el;

        // if the container of your map is visible and wrapped it has a certain width and height...
        // if it also has 100% height, it could be collapsed (not wrapped)
        // so you ask the google maps api to load images at 500px width and 0height?
        // if the parent has 0height, the ratio helps to set it properly
        // with debug tools (F12) you can see the parent if it lights up
        if (parent.is(':visible')) {
            w = parent.outerWidth(false);
            h = w * this.settings.options.mapRatio; // 4/3 | 16/9
            this.map.css({ width: w, height: h });
        } else {
            // if your map is invisible after load...
            id = this.onParent.prop('id'); // this id references my tab
            el = this.onParent.prevAll().find('a[href=#' + id + ']'); // trigger of the tab
            // add click event once
            el.one(this.settings.events.onParent, function() {
                setTimeout(function() {
                    self.activate(); // goes back to calculateMap()
                }, 200);
            }.bind(this));
        }
    },

If you trigger calculateMap on the resize event, you'll have a responsive approach.

Also a quick google showed me this approach ... notice the fixed width and height on the iframe.

In short:

• fixed width and height in css gives you the cleanest solution. you might be able to use a clearfix, padding in % or min-height in px to gain dimension if that works out.
• For dynamic/event loading I suggest JavaScript or jQuery
• or with an iframe and a fixed width and height

---

Related Topics