google map with active polygons and events

map coordinates has a reduced dataset for jsfiddle. Zooming in highlights this. Census data displayed on map

by chrisloughnane

HTML

<!-- map coordinates has a reduced dataset for jsfiddle. Zooming in highlights this. Census data displayed on map -->
<link rel="stylesheet" type="text/css" href="stylesheets/default.css" />

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

    <div id="wrapper-map">
        <div id="map-canvas"></div>
    </div>

    <div id="wrapper-CoatOfArms">
        <div id='wrapper-results' class='results'>
            <div id='county'></div>
            <div id='total'></div>
            <div id='male'></div>
            <div id='female'></div>
        </div>
    </div>

CSS

html { 
    height: 100%;
}

body { 
    height: 100%; 
    margin: 0px; 
    padding: 0px 
}

#map-canvas { 
    width: 600px;
    height: 700px
}

#wrapper-CoatOfArms {
    position: absolute;
    left: 51px;
    top: 70px;
}

#coatOfArms { 
    position: absolute;
}

#wrapper-results {
    position: relative;
    font-size: 20px;
    font-family: tahoma;
    top: -10px;
    left: 60px;
    background-color: white;
    opacity: 0.8;
    width: 230px;
    border:1px solid;
    border-radius:5px;
    -moz-border-radius:25px; /* Firefox 3.6 and earlier */
    box-shadow: 10px 10px 5px #888888;
}

#county, #total, #male, #female {
    margin: 5px;
}

.results { display: none; }

JavaScript

$(function() {
        
    function renderMap(){
    
    var myLatlng = new google.maps.LatLng(53.3,-8.216901);
    var myOptions = {
        zoom: 7,
        center: myLatlng,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    }
    var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);

    arr = new Array();
    polygon = new Array();
    optionarray = new Array();
    nameConnectArray = new Array();
    
    var path = [];
    var pathindex = 0;
    
    for (var county in paths) {
        
        var coord = paths[county].coordinates.split(" ");
        
        for (var i = 0; i < coord.length; i++) {
            var coords = coord[i].split(",");
            path.push(new google.maps.LatLng(coords[1], coords[0]));
        }
        arr[pathindex] = path;

        //polygon options
        var options = {
            clickable: false,
            fillColor: paths[county].colour,
            fillOpacity: 0.35,
            geodesic: true,
            map: map,
            paths: new google.maps.MVCArray(arr[pathindex]),
            strokeColor: 'white',
            strokeOpacity: 0.8,
            strokeWeight: .5,
            zIndex: 99,
            clickable: true,
            title: paths[county].name,
            data: paths[county].colour,
            total: paths[county].total,
            male: paths[county].male,
            female: paths[county].female            
        }
        optionarray[pathindex] = options;


        polygon[pathindex] = new google.maps.Polygon(optionarray[pathindex]);
        
        google.maps.event.addListener(polygon[pathindex], 'click', function() {
            //place holder            
            });

        
        google.maps.event.addListener(polygon[pathindex],"mouseover",function(){
            this.setOptions({ strokeColor: 'yellow', fillColor: "white" });
            $('#wrapper-results').removeClass('results');
            document.getElementById("county").innerHTML = "County...