CODEWITHSUNDEEP
cssgoogle-maps
JohnDotOwl
JohnDotOwl

Reputation: 3755

Google map inside container

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! :)

Upvotes: 1

Views: 3533

Answers (1)

JohnDotOwl
JohnDotOwl

Reputation: 3755

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 :)

Upvotes: 4

Related Questions