I'm trying to make an overlay on google maps of all 88 Ohio counties, each in a color that represents the number of volunteers we have had signup fron that county. I have been using this tutorial from Elliot Media Group and it works great for ONE county:


The county boundary information is kept in a separate file as the variable "rawData." I figure I would simply add a variable for each county in the javascript file, BUT with an added accompanying variable describing the color. (rawData1, color1, rawData2, color2 etc).

My issue is how to build a FOR() loop to go through each variable and render the overlay for each county. In php I would make a dynamic variable name, but I have looked around and arrays seem to be the javascript solution. Can anyone help me? I'm a total newbie at this and I'm doing this pro bono for a good cause. The code for this is below, but a lot is gibberish to me. THANK YOU for any help you can give me!

var currentOverlays = [];
		function loadMap(){
			var myOptions = {
					zoom: 9,
					center: new google.maps.LatLng(34.0522,-118.2437),
					mapTypeId: google.maps.MapTypeId.TERRAIN
			var map = new google.maps.Map(document.getElementById("map"), myOptions);
			var laCounty = createOverlay();
			for (var n=0, overlay; overlay = currentOverlays[n]; n++){
					currentOverlays = [];

		function createOverlay(){
				var overlayCoords = new Array();

				var processedData = rawData.split(";");
				for (var i=0; i<processedData.length; i++){
					var xyCoords = processedData[i].split(",");
					overlayCoords.push(new google.maps.LatLng(xyCoords[0],xyCoords[1]));
				var myOverlay = new google.maps.Polygon({
					paths: overlayCoords,
					strokeColor: "#FF0000",
		   			strokeOpacity: 0.8,
		    		strokeWeight: 2,
		    		fillColor: "#FF0000",
		    		fillOpacity: 0.35
				return myOverlay