Map isn t showing on Google Maps JavaScript API v3 when nested in a div tag

Question

I m trying to put the div tag that shows the map   lt div id  map-canvas  gt  lt  div gt   inside another div  but it doesn t show the map that way  Is it a CSS or a JavaScript problem  Or is it just the way the API works     Here s my code with the the nested div      lt  DOCTYPE html gt   lt html gt     lt head gt       lt title gt Simple Map lt  title gt       lt meta name  viewport  content  initial-scale 1 0  user-scalable no  gt       lt meta charset  utf-8  gt       lt style gt          html  body   map-canvas               margin  0              padding  0              height  100                  lt  style gt       lt script src  https   maps googleapis com maps api js v 3 exp amp sensor false  gt       lt  script gt       lt script gt          var map          function initialize               var mapOptions                 zoom  8              center  new google maps LatLng -34 397  150 644               mapTypeId  google maps MapTypeId ROADMAP                        map   new google maps Map document getElementById  map-canvas                  mapOptions                      google maps event addDomListener window   load   initialize        lt  script gt   lt  head gt   lt body gt       lt div gt   lt  -- ommiting this div will show the map -- gt           lt div id  map-canvas  gt  lt  div gt       lt  div gt   lt  body gt   lt  html gt

User · Accepted Answer

Add style  width 100   height 100    to the div see what that does   not to the  map canvas but the main div  example   lt body gt       lt div style  height 100   width 100    gt            lt div id  map-canvas  gt  lt  div gt       lt  div gt   lt  body gt     There are some other answers on here the explain why this is necessary

User · Answer

I solved this problem with        lt div id  map  style  width  100   height  100   position  absolute   gt                    lt div id  map-canvas  gt  lt  div gt        lt  div gt

User · Answer

Wizard  Have you tried setting the height and width of the extra div  I know that on a project I am working on JS won t put anything in the div unless I have the height and width already set   I used your code and hard coded the height and width and it shows up for me and without it doesn t show    lt body gt       lt div style  height 500px  width 500px   gt   lt  -- ommiting the height and width will not show the map -- gt            lt div id  map-canvas  gt  lt  div gt       lt  div gt   lt  body gt     I would recommend either hard coding it in or assigning the div an ID and then add it to your CSS file

User · Answer

In my case I was getting the grey background and it turned out to be inclusion of a zoom value in the map options   Yup  makes no sense

User · Answer

FIXED  Give initial height of div and specify height in percentage in your style    map      height  100       lt div id  map  style  clear both  height 200px   gt  lt  div gt

User · Answer

Understand this has been solved  but the solution provided above might not work in all situation   For my case    lt div style  height  490px  position relative  overflow hidden  gt       lt div id  map-canvas  gt  lt  div gt   lt  div gt

User · Answer

I just want to add what worked for me  I added height and width to both divs and used bootstrap to make it responsive      lt div class  col-lg-1 mapContainer  gt          lt div id  map  gt  lt  div gt      lt  div gt       map          height  100           width 100            mapContainer          height 200px          width 100         in order for col-lg-1 to work add bootstrap reference located Here

User · Answer

The problem is with percentage sizing   You are not defining the size of the parent div  the new one   so the browser can not report the size to the Google Maps API   Giving the wrapper div a specific size  or a percentage size if the size of its parent can be determined  will work   See this explanation from Mike Williams  Google Maps API v2 tutorial      If you try to use style  width 100  height 100   on your map div  you get a map div that has zero height  That s    because the div tries to be a percentage of the size of the  lt body gt   but by default the  lt body gt  has an indeterminate    height       There are ways to determine the height of the screen and use that number of pixels as the height of the map div     but a simple alternative is to change the  lt body gt  so that its height is 100  of the page  We can do this by    applying style  height 100   to both the  lt body gt  and the  lt html gt    We have to do it to both  otherwise the     lt body gt  tries to be 100  of the height of the document  and the default for that is an indeterminate height     Add the 100  size to html and body in your css      html  body   map-canvas           margin  0          padding  0          height  100           width  100           Add it inline to any divs that don t have an id    lt body gt     lt div style  height 100   width  100    gt        lt div id  map-canvas  gt  lt  div gt     lt  div gt   lt  body gt

[javascript] Map isn't showing on Google Maps JavaScript API v3 when nested in a div tag

Examples related to javascript

Examples related to google-maps-api-3