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%'> </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%'> </div> <div class='span-24 last' style='width: 90%; height: 380px; padding-top: 5%;'> </div>";
map[i]=new google.maps.Map(childMaps[i],mapProp[i]);
}
//map=new google.maps.Map(document.getElementById("googleMap"),mapProp[0]);
}