-1

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

spazzed
  • 93
  • 2
  • 9
  • possible duplicate of [Google Maps API v3 | shows no map data](http://stackoverflow.com/questions/18273430/google-maps-api-v3-shows-no-map-data) – geocodezip Dec 13 '13 at 17:25
  • There is an error in the CSS(the comma after 85% has to be a semicolon) – Dr.Molle Dec 13 '13 at 17:48

2 Answers2

2

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!

dSquared
  • 9,725
  • 5
  • 38
  • 54
  • Most of the official [map-demos](https://developers.google.com/maps/documentation/javascript/examples/) use a percentage value for height, and they work pretty good – Dr.Molle Dec 13 '13 at 17:40
  • @Dr.Molle I just took a quick look through and wasn't able to find one that did, could you reference one? – dSquared Dec 13 '13 at 17:42
  • The [first one](https://google-developers.appspot.com/maps/documentation/javascript/examples/full/map-simple) (pretty much all of them have a "view full screen" that does this). – geocodezip Dec 13 '13 at 17:43
  • @geocodezip I stand corrected, answer edited to remove incorrect information. Thanks! – dSquared Dec 13 '13 at 17:47
  • It does display the map but now #second inherits the same problem -- No matter what percentage I set this element to, it does not seem to resize the map? – spazzed Dec 13 '13 at 18:07
  • I just kept giving size the parent elements and eventually learned that the "jumbotron" class was throwing things off. If I assign this element a size, my problems go away. Thanks! – spazzed Dec 13 '13 at 18:40
1

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%;
}
geocodezip
  • 158,664
  • 13
  • 220
  • 245
  • Your link makes logical sense, however your CSS still results in no map being displayed. – spazzed Dec 13 '13 at 18:04
  • probably the syntax error in the CSS that Dr Molle pointed out (the , that used to be after 85%) – geocodezip Dec 13 '13 at 18:06
  • Your answer was correct but it was the "jumbotron" class that was throwing things off. Setting this to have a height and width seems to have fixed the problem. Thanks! – spazzed Dec 13 '13 at 18:39
  • There is no jumbotron class in your posted code in the question. – geocodezip Dec 13 '13 at 18:44
  • If it was a problem with a nested div, then it is a duplicate of [Map isn't showing on Google Maps JavaScript API v3 when nested in a div tag](http://stackoverflow.com/questions/16349476/map-isnt-showing-on-google-maps-javascript-api-v3-when-nested-in-a-div-tag/16349547#16349547), but I looked at your css and didn't see any. – geocodezip Dec 13 '13 at 18:59