Google Maps div not showing up in JSBin

Question

If I set my width to 500px, I can get the map-canvas div to show up when I click my "get started" button. If I set my height/width to 100%, it doesn't show up.

I want to be sure my project will load on a mobile device so I don't want to use absolute dimensions.

http://jsbin.com/OpujukIF/1/edit?html,css,output

Answer 1

Use can use absolute positioning without a width | height value, using top|left|bottom|right with 0 set as their values which would result in the #map-canvas div becoming the size of the containing element #second as long as it is set to relative like so:

#second {
    position: relative;
}

#map-canvas { 
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
}

Here is the updated bin.

I hope this helps!

Answer 2

See Mike Williams explaination of percentage sizing from his Google Maps Javascript API v2 tutorial

html {
  height:100%;
  width: 100%; 
}
body {
  padding-top: 50px;
  padding-bottom: 20px;
  height: 100%;
  width: 100%;
}

#map-canvas { 
  height: 85%;
  width: 100%;
}