Turnout Map

Linking the recent flow table to a google map and vice versa

by beej

HTML

<script type="text/javascript" src="https://www.google.com/jsapi">
        <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
            <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
        <p><div id="Usage"></div></p>
        <p><div id="Summary"></div></p>
        <p><div id='map_canvas' style='margin: 30px auto; width: 640px; height: 480px;'></div></p>

JavaScript

google.load('visualization', '1', {
    packages: ['table']
});
var optionsSummary, Summary, SummaryView, SummaryTable, map, turnouts = [];
var red = "FE7569";
var green = "80DA5A";
var bigRed = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_spin&chld=0.75|0|" + red + "|20",
    new google.maps.Size(29, 51),
    new google.maps.Point(0, 0),
    new google.maps.Point(13, 48));

var bigGreen = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_spin&chld=0.75|0|" + green + "|20",
    new google.maps.Size(29, 51),
    new google.maps.Point(0, 0),
    new google.maps.Point(13, 48));

var smallRed = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_spin&chld=0.5|0|" + red + "|20",
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));

var smallGreen = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_spin&chld=0.5|0|" + green + "|20",
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34));

google.setOnLoadCallback(initialize);

function setOptionSummary(prop, value) {
    optionsSummary[prop] = value;
    drawSummary();
}

function drawSummary() {
    Summary.addColumn('string', 'Turnout');
    Summary.addColumn('string', 'State');
    Summary.addColumn('date', 'Last Reading');
    Summary.addColumn('number', 'Last Flow');
    Summary.addColumn('number', 'MTD Acft');
    Summary.addColumn('number', 'YTD Acft');
    Summary.addColumn('string', 'Latitude');
    Summary.addColumn('string', 'Longitude');
    Summary.addRows([['W80.01-03', 'Off', new Date(2011, 7, 28, 7, 0, 0, 0), 1.7, 0, 167.15, '36.4448814920614', '-119.506136178826'], ['W80.02-01', 'Off', new Date(2011, 9, 28, 9, 0, 0, 0), 2.2, 0, 298.95, '36.4450155744256', '-119.512773912478'], ['W80.02-02', 'Off', new Date(2011, 10, 2, 7, 0, 0, 0), 3.56, 0, 416.75, '36.4449015114715',...