How to Make a Google Maps Container Div 100% Height and Width?

Set Google Maps Container DIV to 100% Height and Width

Many developers encounter an issue when attempting to set the width and height of a Google Maps container div to 100%. Setting these properties to 100% typically results in the map being invisible.

HTML Code:

<code class="html"><!-- Maps Container -->
<div id="map_canvas" style="height:100%; width:100px; margin:0 auto;"></div></code>

Solution:

To resolve this issue, ensure that all parent containers of the map are set to a width of 100%. Additionally, set a fixed width and height for the #content div:

CSS:

<code class="css">body, html {
  height: 100%;
  width: 100%;
}

div#content {
  width: 100%;
  height: 100%;
}</code>

By setting these CSS properties, the map will now occupy the entire visible area.

The above is the detailed content of How to Make a Google Maps Container Div 100% Height and Width?. For more information, please follow other related articles on the PHP Chinese website!