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:
http://elliottmediagroup.com/2011/01/24/maps-api/
http://testbed.elliottmediagroup.com/maps%20v3/
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();
laCounty.setMap(map);
currentOverlays.push(laCounty);
$("#clear").click(function(){
for (var n=0, overlay; overlay = currentOverlays[n]; n++){
overlay.setMap(null);
}
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
}
