asked on

CSS layout for Google Maps v3

I am trying to create a layout that has a header followed by a content area with a left menu and the map. Below this is the footer.

My current issue is that the map extends an addition 250 px to the right - this is the same width as the left content area.

Once I have this figured out, my goal is to have it so that the user can click a button in the left menu to collapse the pane so they have a full screen map.

Code is below. Just insert your own key.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
<title>Simple map frame</title>

<style type="text/css">

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

#contentContainer{
    overflow:none;
    height:100%;
    width:100%;
}

#header {
	background-color: #09C;
	clear: both;
	height: 40px;
	position: absolute;
	top: 0px;
	width: 100%;
}

#bodyContainer{
	/* [disabled]height: 100%; */
	width: 100%;
	position: absolute;
	top: 40px;
	bottom: 20px;
}


#leftContainer{
	width: 250px;
	background-color: #EFEFEF;
	height: 100%;
	float: left;
	/* [disabled]overflow: scroll; */
	/* [disabled]overflow-style: auto; */
	/* [disabled]z-index: 10; */
	position: absolute;
	top: 0px;
	/* [disabled]overflow-x: hidden; */
}

#leftPane{
	width: 240px;
	top: 10px;
	background-color: #FFF;
	left: 5px;
	right: 5px;
	bottom: 5px;
	position: absolute;
}



#mapContainer{
	height: 100%;
	background-color: #FFCC00;
	/* [disabled]overflow: scroll; */
	/* [disabled]overflow-style: auto; */
	position: relative;
	left: 250px;
	/* [disabled]padding-left: 250px; */
	/* [disabled]overflow-x: hidden; */
}


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


#footer {
	background-color: #09C;
	clear: both;
	height: 20px;
	position: absolute;
	bottom: 0px;
	width: 100%;
	float: left;
}

</style>
  <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=&sensor=true">
    </script>
	
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
	
	
	
	
    <script>

var map;

function initialize() {
  var mapOptions = {
    zoom: 5,
    center: new google.maps.LatLng(24.886436490787712, -70.2685546875),
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };


  map = new google.maps.Map(document.getElementById('map_canvas'),
      mapOptions);  
}
google.maps.event.addDomListener(window, 'load', initialize);



</script>


</head>
<body>

<div id="contentContainer" >
    <div id="header">The Header
    </div><!--End Header-->
    
    <div id="bodyContainer">
        <div id="leftContainer" >
            <div id="leftPane" >
               Some stuff</a>. 
            </div><!--End leftPane-->
        </div><!--End leftContainer-->
        <div id="mapContainer">
            <div id="map_canvas">Map here
            </div><!--End map_canvas-->
        </div> <!--End mapContainer-->
    </div> 
    <!--End BodyContainer-->
    
    <div id="footer">The footer!
    </div> <!--End Footer-->
</div> <!--contentContainer-->




</body>
</html>

Open in new window

ASKER CERTIFIED SOLUTION

Gary

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

lvmllc

ASKER

Thanks -