I have a very simple Google map using Google Maps API v3 that will not render between div tags.

CSS:

#mainContent {
background:#c8dbec url(//images.rigzone/images/background_body4.gif) 50% top repeat-y;
/*e0ecff c1daf0 e3ecf3*/
position: relative;
text-align: left;
}
* {
text-align: left;
 }
#content {
width: 935px;
margin:auto;
position: relative;
padding-left:0px;
padding-top:7px;
padding-bottom:10px;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
}

#mainBody {
float:right;
width:770px;
padding:0px 5px 0px 5px;
}

html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100%; width:400px; }

HTML/JS:

<div id="mainContent">  
<div id="content">  
    <div id="mainBody">

        <script type="text/javascript" src=".exp&sensor=false&key=myKeyID&libraries=weather">
        </script>
        <script type="text/javascript">
          var map
          function initialize() {
             var mapOptions = {
               center: new google.maps.LatLng(28.39404819, -91.38743867),
               zoom: 7,
               mapTypeId: google.maps.MapTypeId.HYBRID
             };
             map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);   
          }
        </script>                

        <div id="map_canvas" style="width:600px; height:50%"></div>

        <script>initialize();</script>    
    </div>
</div>

If I remove the div tags surrounding the map, it works fine, but I don't have the formatting that is required. Removing the divs is not an option, either, as they are hard coded in our header and footer files. Any help is appreciated.

I have a very simple Google map using Google Maps API v3 that will not render between div tags.

CSS:

#mainContent {
background:#c8dbec url(//images.rigzone./images/background_body4.gif) 50% top repeat-y;
/*e0ecff c1daf0 e3ecf3*/
position: relative;
text-align: left;
}
* {
text-align: left;
 }
#content {
width: 935px;
margin:auto;
position: relative;
padding-left:0px;
padding-top:7px;
padding-bottom:10px;
font-family: Arial, Helvetica, sans-serif;
text-align: left;
}

#mainBody {
float:right;
width:770px;
padding:0px 5px 0px 5px;
}

html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100%; width:400px; }

HTML/JS:

<div id="mainContent">  
<div id="content">  
    <div id="mainBody">

        <script type="text/javascript" src="https://maps.googleapis./maps/api/js?v=3.exp&sensor=false&key=myKeyID&libraries=weather">
        </script>
        <script type="text/javascript">
          var map
          function initialize() {
             var mapOptions = {
               center: new google.maps.LatLng(28.39404819, -91.38743867),
               zoom: 7,
               mapTypeId: google.maps.MapTypeId.HYBRID
             };
             map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);   
          }
        </script>                

        <div id="map_canvas" style="width:600px; height:50%"></div>

        <script>initialize();</script>    
    </div>
</div>

If I remove the div tags surrounding the map, it works fine, but I don't have the formatting that is required. Removing the divs is not an option, either, as they are hard coded in our header and footer files. Any help is appreciated.

• javascript
• css
• google-maps

• Which width/height do you want for map_canvas? There are different definition in styling section and div tag. – Anto Jurković Commented Apr 2, 2014 at 19:28
• The one on the div tag needs to be kept. – KMBonin Commented Apr 2, 2014 at 19:30
• What defines the height of the "mainBody" div? If it doesn't have a height, 50% of 0 is 0. – geocodezip Commented Apr 2, 2014 at 19:37
• possible duplicate of How to center/align Google Maps in a div with a variable width – geocodezip Commented Apr 2, 2014 at 19:41
• 1 Adding a height solved my problem. Not sure why the width can be a percentage but not the height. Thanks for the tip. – KMBonin Commented Apr 2, 2014 at 19:41

2 Answers 2

The way block elements (like div) work is that it takes the full width of it's parent element, and the smallest height of it's relative children. If a block element's child set it's height to 100%, it's almost like circular reference, but this behavior set this to 0, unless it has a hard number attached to it.

To solve this, you need to have a height of all the divs in its nesting path along the way set to the height of it's parent for what you want to acplish. If you use Inspect Element in your browser's developer tools, you will see what this means.

I've created a JSFiddle you can play with that includes your setup. Also, to initialize, you should use google.maps.event.addDomListener to call your initialize function instead of calling it directly since your browser will try to load the scripts in asynchronously and the API may not be ready by the time it gets to the calling function initialize();.

Try this it will work! put the style tag in header and div in body.

<style>
 #_map {    
    height: 350px;   
    width: 900px;  
  }
</style>

 <div id="_map"></div>