Inserire mappa di google come sfondo pagina

[d.force]

Inserire mappa di google come sfondo pagina

Salve a tutti, vorrei inserire una mappa di google come sfondo pagina.

La mappa rappresenta un tracciato per bicicletta.

Vorrei che questa mappa si espandesse al 100% in larghezza e al 100% in altezza all'interno di un div. In un altro div ho inserito un menù dove cliccando sulle diverse voci cambia la mappa di sfondo.

Il tutto funziona perfettamente su Chrome ma non su Firefox.

Il problema è che su Firefox la mappa non si espande...

Ecco il codice della pagina:

Codice per cambiare mappa in base alla voce di menu:

<script type="text/javascript">
function change_content (a) { 
    var box = document.getElementById('mappa');
if (a == 'Mappa1') {
box.innerHTML ='<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.it/maps/ms?msa=0&amp;msid=201183013499379389010.0004da16e66523ed8e64c&amp;hl=it&amp;ie=UTF8&amp;t=h&amp;source=embed&amp;ll=43.547055,10.928478&amp;spn=0.05599,0.077162&amp;z=14&amp;output=embed"></iframe>';
} 
else if (a == 'Mappa2') {
box.innerHTML ='<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.it/maps/ms?msa=0&amp;msid=201183013499379389010.0004d85b42861b32b9f8d&amp;hl=it&amp;ie=UTF8&amp;t=h&amp;source=embed&amp;z=15&amp;output=embed"></iframe>';
} 
else if (a == 'Mappa3') {
box.innerHTML ='<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.it/maps/ms?msa=0&amp;msid=201183013499379389010.0004d89bf69ad095c4d06&amp;hl=it&amp;ie=UTF8&amp;t=h&amp;source=embed&amp;z=14&amp;output=embed"></iframe>';
} 
else if (a == 'Mappa4') {
box.innerHTML ='Contact';
} 
else {alert('an error occurent:\nError on change_contenent\nPlease contact the web developer');} 
}
</script>

Codice Html:

        <div id="container">


                <div id="content">
                
                        <!-- ESEMPIO -->
                                
                        <div id="corpo">
                                <div id="main">
                                        <div id="mappa"><iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.it/maps/ms?msa=0&amp;msid=201183013499379389010.0004da16e66523ed8e64c&amp;hl=it&amp;ie=UTF8&amp;t=h&amp;source=embed&amp;ll=43.547055,10.928478&amp;spn=0.05599,0.077162&amp;z=14&amp;output=embed"></iframe></div>
                                </div><!-- //main -->
                                
     <div id="sidebar">
     
<div id="Home" onclick="change_content ('Mappa1')">Mappa1</div>                                
<div id="Home" onclick="change_content ('Mappa2')">Mappa2</div>                                
<div id="Home" onclick="change_content ('Mappa3')">Mappa3</div>                                
	</div>
                        
                        
                        
                        </div><!-- //corpo -->
                                
                        
                </div>
        </div>

CSS:

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

img{
border:0px;
}

*{margin:0;padding:0}

#corpo{
	overflow:hidden;
	line-height: 23px;
}


#main{
	float:left;
	width:100%;
	position:relative;
	z-index:5;
	left:540px;
	margin-left:-540px;
}
 #mappa{
	margin-right:540px;
	background:#000;
	padding:0px;
	height:100%;
	}

#sidebar{
	float:right;
	width:500px;
	position:relative;
	z-index:10;
	background:#84DBD4;
	padding:20px;
	} 

#home {
	cursor:pointer;
	}

Qualcuno può aiutarmi a far espandere la mappa anche su Firefox?

Grazie 1000 anticipatamente!

d-force