i'm having some issues with placing Google map inside my Container, its giving some issue loading when i place it into any of my containers, it will only work outside of all my containers :(
<section class="lookingfor">
<ul class="clearfix">
<li class="homeMap">
<div id="map_canvas" style="width: 100%; height: 100%"></div>
</li>
</ul>
</section>
looking for class:
section.lookingfor .skills div.text {font-family: 'Open Sans', sans-serif; color:#666; font-size:14px; line-height:22px;}
section.lookingfor ul li.homeMap {width: 100%; height: 100%;}
Not sure if the first line affects :O
Clearfix:
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
homeMap class:
section.lookingfor ul li.homeMap {width: 100%; height: 100%;}
Thanks in advance! :)
1 Answer
Set
position:relative;
and use fixed height&width instead of % because % will give you 0 height. "That's because the div tries to be a percentage of the size of the , but by default the has an indeterminate height."
will fix the issue. Thanks to those who viewed :)
