CODEWITHSUNDEEP
cssgoogle-maps
hobbes3
hobbes3

Reputation: 30218

CSS positioning with Google Maps API

I'm trying to copy the website http://touch.facebook.com, where they have a side menu that shows when a button on the top menu is clicked. Basically a three-panel layout of a side menu (A), a top menu (B), and the content (C) as shown below:

__________________
|   |______B_____|
| A |            |
|   |      C     |
|   |            |
|___|____________|

In my HTML I call A side_menu, B top_menu, and C map_canvas. B and C combined is content. In the map_canvas I wanted to put a Google map that spans out the entire screen (like height 100% and width 100%). I want to stretch the map as much as possible so that this site will be viewed nicely on a computer or a mobile device.

Currently my CSS looks like this:

body
{
    font-family : sans-serif;
    direction   : ltr;
    text-align  : left;
    line-height : 18px;
}

#side_menu
{
    background : none repeat scroll 0 0 #32394A;
    overflow   : hidden;
    position   : absolute;
    min-height : 100%;
    width      : 260px;
}

#content
{
    left        : 260px;
    position    : relative;
}

#top_menu
{
    position         : relative;
    border-color     : #111A33;
    box-shadow       : 0 1px 1px -1px #FFFFFF inset;
    background-color : #385998;
    height           : 29px;
    padding          : 7px 5px;
}

#map_canvas
{
    height : 100%;
    width  : 100%;
}

But the 'map_canvas' fails to appear at all. I know if I specifically enter a fixed height and width, then it will appear, but I want to stretch it out as far as the screen size. Is this possible?

Here is the HTML:

<!DOCTYPE html>
<html>
    <head>
        <link href = "common/css/main.css" rel = "stylesheet" type = "text/css"/>
    </head>
    <body>
        <div id = "side_menu">Side Menu</div>
        <div id = "content">
            <div id = "top_menu">Top Menu</div>
            <div id = "map_canvas"><!-- The Google map goes here --></div>
        </div>
    </body>
</html>

I've also noticed that after the map gets loaded, it adds some style of its own:

<div id="map_canvas" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">
    <div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
         <!-- More Google map mumbo jumbo -->
    </div>
</div>

Upvotes: 0

Views: 9753

Answers (1)

andresf
andresf

Reputation: 2061

You need to explicitly set the height and width of #content in your CSS, since the map_canvas div is a child of that element. Looks like you'll need to use either a combination of absolute and relative width/height, use margin offsets, or JS-based resizing to ensure that the map adjust to the full extent.

But I would start by verifying that setting the #content width and height works first (it should).

Kudos for incorporating the term "mumbo jumbo" into a StackOverflow question. :-)

Upvotes: 1

Related Questions