Update - Iframe overlay

Managed to display the googlemaps as an iframe in the background using absolute positioning and using z Index to position the elements in terms of order of the divs and which becomes overlayed over what, and using positioning attached to each frame to decide where it is displayed over the map

Screenshot: (click to see bigger version)

Current code:

  








channel->item as $photoitem) {
	if($photocounter < 6){
	    $photocounter=$photocounter+1;
}  
	//loads rss feed variable of the image, concatination used to add a counter e.g. 1,2,3... to each photo so that they can be individually edited - using css ID, however had to apply ID to the image source not ID for css styles to work
	print "

";
    print "
";
// if the counter reaches 6, break the function, meaning that it will only display 6 photos in total from the RSS feed. 
    if($photocounter==6){
	     break;
		    } 
}
print "


";
foreach ($twitterxml->channel->item as $twitteritem) {
	/*loads rss feed of the twitter same proccess as above, but different paremeters have been used in the CSS stylesheet for each individual twitter update.
	however unlike the photos above div id is added to the div */
    print "
$twitteritem->title
";
    print "


";
if($twittercounter < 6){
	$twittercounter=$twittercounter+1;
	if($twittercounter==6){
	break;
	}
	}
	}
?>

CSS Stylesheet:

body {
background:gray;
text-align:center;
margin:20px;
padding:0;
font:normal 0.8em/1.2em verdana,aria,sans-serif;
color:#666;
	}
.resize {
width: 100px;
height : auto;
}
.resize {
width: auto;
height : 150px;
}
.divtwitter {
font-family:"Times New Roman", Times, serif;
font-size:20px;
color:white;
text-align:left;
float: left;
width: 400px;
height: auto;
}
.divphotobucket {
float: left;
}
#photo1 {
width: 320px;
height : auto;
border: 5px solid #ddd;
padding: 5px; /*Inner border size*/
background: #fff; /*Inner border color*/
float: left;
position: absolute; left: 50px; top: 150px; 
             right: 0px;
z-index: 100 
}
#photo2 {
width: 320px;
height : auto;
float: left;
filter:alpha(opacity=90);
-moz-opacity:.80;
opacity:.80;
position: absolute; left: 300px; top: 500px; 
             right: 0px;
z-index: 100;
}
#photo3 {
width: 260px;
height : auto;
float: left; 
border: 5px solid #ddd;
padding: 5px; /*Inner border size*/
background: #fff; /*Inner border color*/
filter:alpha(opacity=60);
-moz-opacity:.60;
opacity:.60;
position: absolute; left: 800px; top: 400px; 
             right: 0px;
z-index: 100; 
}
#photo4 {
width: 220px;
height : auto;
float: left;
filter:alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;
position: absolute; left: 400px; top: 300px; 
             right: 0px;
z-index: 100;

}
#photo5 {
width: 180px;
height : auto;
float: left;
filter:alpha(opacity=20);
-moz-opacity:.20;
opacity:.20;
position: absolute; left: 900px; top: 300px; 
             right: 0px;
z-index: 100;
}
#photo6 {
width: 120px;
height : auto;
float: right;
border: 5px solid #ddd;
padding: 5px; /*Inner border size*/
background: #fff; /*Inner border color*/
filter:alpha(opacity=10);
-moz-opacity:.10;
opacity:.10;
position: absolute; left: 1000px; top: 300px; 
             right: 0px;
z-index: 100; 
}
#twitter0 {
font-size: 40px;
color: white;
text-shadow: 0px 2px 3px #555;
float: right;
padding-top: 20px;
position: absolute; left: 1100px; bottom: 100px; 
             right: 0px;
z-index: 100; 
}
#twitter1 {
font-size: 30px;
color: white;
text-shadow: 0px 2px 3px #555;
position:relative;
padding-top: 35px;
float: left;
position: absolute; left: 1000px; bottom: 200px; 
             right: 0px;
z-index: 100; 
}
#twitter2 {
font-size: 26px;
color: white;
text-shadow: 0px 2px 3px #555;
float: right;
padding-top: 25px;
position: absolute; left: 900px; bottom: 300px; 
             right: 0px;
z-index: 100; 
}
#twitter3 {
font-size: 22px;
color: white;
text-shadow: 0px 2px 3px #555;
position: absolute; left: 800px; bottom: 400px; 
             right: 0px;
z-index: 100; 
}
#twitter4 {
font-size: 16px;
color: white;
text-shadow: 0px 2px 3px #555;
position: absolute; left: 700px; bottom: 500px; 
             right: 0px;
z-index: 100; 
}
#twitter5 {
font-size: 12px;
color: white;
text-shadow: 0px 2px 3px #555;
position: absolute; left: 600px; bottom: 600px; 
             right: 0px;
z-index: 100; 
}
#twitter6 {
font-size: 8px;
color: white;
text-shadow: 0px 2px 3px #555;
position: absolute; left: 500px; bottom: 700px;  
             right: 0px;
z-index: 100; 
}
#map_canvas {
	position: absolute; top: 0; bottom: 0; 
left: 0; right: 0;
	padding-top: 150px;
}