Set Google Maps Container DIV width and height 100

Question

I loaded Google Maps API v3 and print Google Map in div  But when set width  amp  height to 100  and auto I can t see the Map   Here is HTML code snippet    lt  -- Maps Container -- gt   lt div id  map canvas  style  height 100  width 100px margin 0 auto   gt  lt  div gt    Is there a way to fix this issue

User · Answer

Very few people realize the power of css positioning. To set the map to occupy 100% height of it's parent container do following:

#map_canvas_container {position: relative;}

#map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}

If you have any non absolutely positioned elements inside #map_canvas_container they will set the height of it and the map will take the exact available space.

User · Answer

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

User · Answer

Gmap writes inline style position to relative to the div  Overwrite that with     google maps event addListener map   tilesloaded   function        document getElementById  maps   style position    static       document getElementById  maps   style background    none         Hope it helps

User · Answer

I struggled a lot to find the answer    You don t really need to do anything with body size  All you need to remove the inline style from the map code    lt iframe width  425  height  350  frameborder  0  scrolling  no  marginheight  0  marginwidth  0  src  https   maps google co uk maps f q amp amp source s q amp amp hl en amp amp geocode  amp amp q new york amp amp aq  amp amp sll 53 546224 -2 106543 amp amp sspn 0 02453 0 084543 amp amp ie UTF8 amp amp hq  amp amp hnear New York  United States amp amp t m amp amp z 10 amp amp iwloc A amp amp output embed  gt  lt  iframe gt  lt br   gt  lt small gt  lt a href  https   maps google co uk maps f q amp amp source embed amp amp hl en amp amp geocode  amp amp q new york amp amp aq  amp amp sll 53 546224 -2 106543 amp amp sspn 0 02453 0 084543 amp amp ie UTF8 amp amp hq  amp amp hnear New York  United States amp amp t m amp amp z 10 amp amp iwloc A  style  color  0000FF text-align left  gt View Larger Map lt  a gt  lt  small gt    remove all the inline style and add class or ID and then style it the way you like

User · Answer

This Work for me        lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Transitional  EN   http   www w3 org TR xhtml1 DTD xhtml1-transitional dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt   lt head gt   lt meta http-equiv  Content-Type  content  text html  charset utf-8    gt   lt title gt Untitled Document lt  title gt   lt style type  text css  gt     cont      position  relative      width  300px      height  300px     map canvas      overflow  hidden      position  absolute      top  0      right  0      bottom  0      left  0     lt  style gt    lt script type  text javascript  src  http   maps google com maps api js key APIKEY  gt  lt  script gt   lt script type  text javascript  gt  function initialize         console log  Initializing         var latlng   new google maps LatLng LAT  LNG       var myOptions           zoom  10        center  latlng        mapTypeId  google maps MapTypeId ROADMAP            var map   new google maps Map document getElementById  map canvas            myOptions      lt  script gt   lt  head gt    lt body onload  initialize    gt   lt div id  cont  gt   lt div id  map canvas  style  width  100   height  100    gt  lt  div gt   lt  div gt   lt  body gt   lt  html gt

User · Answer

You can set height to -webkit-fill-available   lt  -- Maps Container -- gt   lt div id  map canvas  style  height -webkit-fill-available width 100px   gt  lt  div gt

User · Answer

Better late than never   I made mine a class    map       position absolute      top 64px      width 1100px      height 735px      overflow hidden      border 1px solid rgb 211 211 211       border-radius 3px      and then   lt div id  map  class  map  gt  lt  div gt

User · Answer

Setting Map Container to position to relative do the trick  Here is HTML    lt body gt       lt  -- Map container -- gt       lt div id  map canvas  gt  lt  div gt   lt  body gt    And Simple CSS    lt style gt  html  body   map canvas       width  100       height  100       margin  0      padding  0     map canvas       position  relative     lt  style gt    Tested on all browsers  Here is the Screenshot

User · Answer

If you can t affect your parents elements  like in a nested components situation  you can use height  100vh which will make it a full window   view  height

User · Answer

This worked for me  map canvas  position  absolute  top  0  right  0  bottom  0  left  0

User · Answer

I just added inline style    lt div id  map canvas  style  width 750px height 484px   gt  lt  div gt   And it worked for me

User · Answer

If that div is the only thing on your page  set   body  html     height  100     width  100

[css] Set Google Maps Container DIV width and height 100%

Examples related to css

Examples related to google-maps

Examples related to google-maps-api-3

Examples related to css-position

Examples related to google-maps-api-2