CSS layout for Google Maps v3

Posted on 2013-10-07
Medium Priority
Last Modified: 2013-10-07
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>
    <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;


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

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

	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; */

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

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

	height: 100%;
	width: 100%;

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

  <script type="text/javascript"
	<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>

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'),
google.maps.event.addDomListener(window, 'load', initialize);



<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-->
    <!--End BodyContainer-->
    <div id="footer">The footer!
    </div> <!--End Footer-->
</div> <!--contentContainer-->


Open in new window

Question by:lvmllc
LVL 58

Accepted Solution

Gary earned 1600 total points
ID: 39553318
In #mapContainer {} change


Author Comment

ID: 39553958
Thanks -

Featured Post

Get your problem seen by more experts

Be seen. Boost your question’s priority for more expert views and faster solutions

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

586 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question