Nesting Div Elements

[emmaclarke]

Hi AllI'm trying to import a google map into a web page where there is already a div tag, google maps use a div element.<div id="middle"> <h2>Contact us</h2> <p>AandB Pots and Pans<br /> Walton Hall<br /> MK7 6AA<br /> Milton Keynes</p> <p>You can contact us by calling our number: +44 (0) 1908 650000</p> <p>Or you can just come and visit us.</p> <p><img src="images/map.jpg" alt="AandB location map" width="400" height="300" /></p> <br /> <br /> <!--- Google Map --> <p> <div id="map_canvas" align="right" style="width: 35%; height: 35%"></p></div> </div> <div id="footer"> </div>But the google map doesn't show up at all, the original div id middle shows up (imported img src map) and then the div footer.

[thescientist]

maybe it's just me, but I don't see any code showing how you're trying to import a google map. There are instructions on their site explaining how to do it though, if I'm not mistaken.

[mmcspadden]

Hey,You are definitely missing some code there. Divs will nest just fine and will display in the order that they are in the code. Unless you are using some fancy CSS they will appear in a column one after the other. If you can include the rest of your code it would be very helpful. Also there are some code tags that make stuff a bit more readable. Check out the buttons at the top of the edit box when you are posting. It will seperate the code from your notes making it easier for people to help you.

[emmaclarke]

/* Define the main layout characteristics to build the columns */#left, #middle, #right {	background-color: inherit;	color: inherit;	float: left;	padding-left: 10px;	padding-right: 5px;}#left {	width: 15%;	min-width: 10em;	padding-left: 5px;	background: #fff; }#middle {	width: 80%;	border-left: 3px dotted #999;; 	background: #fff;}#header {	width: 100%;	background: #666;}#footer {	clear: both;	width: 100%;	background: #fff;}html, body, div, h1, h2, h3 {	margin: 0;	padding: 0;	border-width: 0;}/* Define the main style characteristics to apply to content    in the columns */   html, body {	background-color: #fff;	color: #000;	font-family: verdana, arial, sans-serif;	font-size: small;}#header {	color: #fff;	text-align: center;}#footer {	color: #000;	text-align: center;	font-size:x-small;	font-stretch:expanded;}h1 {	text-align:center;}#header {	letter-spacing: .2em;	border-bottom: 3px dotted #999;}#header.h1 {	font-size: medium;	font-weight: normal;	text-transform: uppercase;}#footer {	border-top: 3px dotted #999;	border-bottom: 3px dotted #999;	margin-top: 0.5em; }/* Define cart-specific and other specific styles *//* formatting for items added to the cart */.cartitems {	line-height: 120%;	margin-left: 15px;}/* formatting for navigation list items */.navlist {	padding: 0em 0 1em 0;	list-style-type: none;	list-style-position: inherit;}

this is the css file that defined div middle and div footer.

<div id="middle">	<h2>Contact us</h2>	<p>AandB Pots and Pans<br />	Walton Hall<br />	MK7 6AA<br />	Milton Keynes</p>	<p>You can contact us by calling our number: +44 (0) 1908 650000</p>	<p>Or you can just come and visit us.</p>	<p><img src="images/map.jpg" alt="AandB location map" width="400"	height="300" /></p>			<br />	<br />		<!--- Google Map -->	<p>  <div id="map_canvas" align="right" style="width: 35%; height: 35%"></p></div>		  </div>        <div id="footer">	<p>©2008 The Open University</p>

this shows the div id ="map canvas" being nested in div middle, but it doesn't show up.

[thescientist]

well, there's no div in your CSS file called "map_canvas" from what I could see. And even if you did have it defined in your CSS file, a map isn't just going to appear without you writing out any code for it! (nor will anything appear for that matter, as you have it now. A div will only expand in order to contain what's inside it. no code, no "div") Try putting something in your div at least if you want to see something on your screen. If you want a google map, you're going to have to read their website about their Google map API and how to incorporate it into your website. I'm planning on using it for a website in the next few days, so we can help each other out if you/we have any questions.

[emmaclarke]

<!--- Loading the google map api -->    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true">  </script>  <script type="text/javascript">   var map;  function initialize() {	var myLatlng = new google.maps.LatLng(52.102681,-0.609741);	var myOptions = {	  zoom: 12,	  center: myLatlng,	  mapTypeId: google.maps.MapTypeId.ROADMAP	}	map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 	google.maps.event.addListener(map, 'zoom_changed', function() {	  setTimeout(moveToDarwin, 1500);	}); 	var marker = new google.maps.Marker({		position: myLatlng, 		map: map, 		title:"AandB Pots and Pans, Walton Hall, MK7 6AA, Milton Keynes"	});	google.maps.event.addListener(marker, 'click', function() {	  map.set_zoom(14);	  title:"AandB Pots and Pans, Walton Hall, MK7 6AA, Milton Keynes"	  	  	});  }   function moveToDarwin() {	var darwin = new google.maps.LatLng(52.102681,-0.609741);	map.set_center(darwin);  } </script>    </head>    <body onload="initialize()">    <!--- Google Map -->  <div id="map_canvas" style="width: 35%; height: 35%"></div>    </body>

This map shows up in a blank html web page with just using the div id map canvas element.I tried doing this on the other web page with it being nested inside a div middle tag but only the . shows up

<!--- Google Map -->	<p>  <div id="map_canvas" align="right" style="width: 35%; height: 35%">.</p></div>		  </div>

so its something to do with it being inside a div element or maybe no code written in the css file?

[thescientist]

well, there's no div in your CSS file called "map_canvas"

[emmaclarke]

IT'S NOW WORKING!!!!!2 problems.No div.map_canvas in the CSS - changed that and put #middle to width=40% and div.map_canvas to 40% the map now shows up on the right of the page.There must have been some errors in the original html file as I started a new one and imported all my javascript scripts inside it and now it works!How to import a google map:-http://code.google.com/apis/maps/documenta...ion.html#LatLngand there are some examples if you want to add extras like clicking on the map etc.

[thescientist]

good deal!