CODEWITHSUNDEEP
javascriptcssgoogle-maps
KMBonin
KMBonin

Reputation: 111

Google Maps API does not render inside DIV tags

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.com/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.com/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.

Upvotes: 1

Views: 7012

Answers (2)

qk ahmadzai
qk ahmadzai

Reputation: 21

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>

Upvotes: 2

Sunny Patel
Sunny Patel

Reputation: 8078

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 accomplish. 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();.

Upvotes: 3

Related Questions