For Loop Create Maps

This site is best viewed in a modern browser with JavaScript enabled.

KarneeKarnay

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?

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]);	
}