I'm trying to create multiple google maps on a single page. To limit the amount of work I'd had to do I've written this function that takes the locations I want the maps centered on. The problem I have is that it only draws one map. Any ideas?

Code:
function drawMaps(locations)
{
	var mapProp = new Array();
	var map = new Array();
	var mapHolder = document.getElementById("mapHolder");
	var childMaps = document.getElementsByClassName("span-24");
	
	for(var i = 0; i < locations.length; i++)
	{
		mapProp[i] = {
  					center:locations[i],
  					zoom:16,
  					mapTypeId:google.maps.MapTypeId.ROADMAP
  					};
		
		if(i==0)
		{
			mapHolder.innerHTML = "<div class='span-1 last' style='width:90%; height:5%'> &nbsp; </div> <div class='span-24 last' id='googleMap' style='width: 90%; height: 380px; padding-top: 5%;'></div>";
		}
		
		mapHolder.innerHTML += " <div class='span-1 last' style='width:90%; height:5%'> &nbsp; </div> <div class='span-24 last' style='width: 90%; height: 380px; padding-top: 5%;'>&nbsp;</div>";		
					
		map[i]=new google.maps.Map(childMaps[i],mapProp[i]);	
	}
	
	//map=new google.maps.Map(document.getElementById("googleMap"),mapProp[0]);	
}