CODEWITHSUNDEEP
cssgoogle-mapsgoogle-maps-api-3
maniac_user
maniac_user

Reputation: 590

CSS for fluid Google Map with sidebar for search results

I plan to include google map using javascript api to show search results for my site. Below is how i want the layout

On top would be header where i would display my common navigation panel .

Sidebar on left -it should be the search result shown as a list view . Its height should be equal to the browser window and on overflow it should scroll .

Map area - It is the google map on which i would show the location of the search results . This should be such that it fills all the space available leaving the header and sidebar

basically it should look something like this website or the normal google places search

html code

<div class="wrapper_test" >
    <div class="full_map" id="search_map">
         <div id="map_canvas"  style="width:100%; height:100%">
        </div>
    </div>
    <div class="test_left" id="search_result" >
    </div>
</div>

css code

   .wrapper_test{
    overflow:auto;
    height:100%;
    width:100%;
}
.test_left{
    width:530px;
    background-color:#006666;
    height:100%;
    float:left;
    overflow:scroll;
    overflow-style:auto;
    z-index:10;
    position:absolute;
    top:0px;
    overflow-x:hidden;
}
.full_map{

    height:100%;
    background-color:#FFCC00;
    overflow:scroll;
    overflow-style:auto;
    position:relative;
    left:530px;
    overflow-x:hidden;
    /*border:5px solid #fff;*/
}

I am not able to do it properly.the full map takes up the whole screen rather than the visible space on right of sidebar.

Please help . Links for examples are invited .

Upvotes: 3

Views: 3183

Answers (1)

andresf
andresf

Reputation: 2061

Change .full_map from having:

left: 530px;

to

padding-left: 530px;

So that your .full_map class looks like this:

.full_map{

    height:100%;
    background-color:#FFCC00;
    overflow:scroll;
    overflow-style:auto;
    position:relative;
    padding-left:530px;
    overflow-x:hidden;
    /*border:5px solid #fff;*/
}

Upvotes: 3

Related Questions