Setting height of google map

Question

I am trying to set the width and height of my google map to 100%. I understand that you need to set the parents as well and I am doing that. This is what I have:

<asp:Content ID="head" ContentPlaceHolderID="head" runat="server">
<style>
    #homeBody {
        height: 100%;
        width: 100%;
    }

    #map {
        width: 100%;
        height: 100%;
        margin-top: 200px;
    }
</style>
</asp:Content>

<asp:Content ID="homeBody" ContentPlaceHolderID="homeBody" runat="server">
    <div id="map"></div>

//some scriping to build map and what not
</asp:Content>

Can anyone tell me what I may be doing incorrectly? I currently just get a very slim line across the page... basically no height, just the width.

Please provide a [Minimal, Complete, Tested and Readable example](http://stackoverflow.com/help/mcve) that demonstrates the issue (preferably the HTML/CSS the browser sees).. — geocodezip, Jan 28 '16 at 22:21

score 1 · Answer 1 · answered Jan 28 '16 at 21:50

Additional markup would be helpful.

If #homeBody is a child of another element that doesn't have it's height set on it, then it's height: 100%; won't work either. If you continue to use percentage heights for parent elements, then those elements will need to have a height set on their parent as well. If all you have is percentage heights then the chain needs to continue all the way up to the <html> tag.

Basically what the browser is doing is trying to figure out what 100% is a percentage of. Once it gets to <html> it can use the viewport as it's parent element which will have a specific height defined.

I see. And that literally is all markup minus the scripting for the maps portion — Code, Jan 28 '16 at 21:58

score 0 · Accepted Answer · edited May 23 '17 at 12:23

0

You are right the parent must have an height for your map to take the same place. You can have a look at this if you want 100% height : Set Google Maps Container DIV width and height 100%

edited May 23 '17 at 12:23

Community

1
1

answered Jan 28 '16 at 21:49

Mushr00m

2,258
1
21
30

Setting height of google map

2 Answers2