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 iconOn = new google.maps.MarkerImage('http://portal.stormsupport.com/J171a/media/com_stormportal/images/Turnout-Play-28.png', new google.maps.Size(24, 24), new google.maps.Point(0, 0), new google.maps.Point(12, 24));
var iconOff = new google.maps.MarkerImage('http://portal.stormsupport.com/J171a/media/com_stormportal/images/Turnout-Stop-24.png', new google.maps.Size(24, 24), new google.maps.Point(0, 0), new google.maps.Point(12, 24));

google.setOnLoadCallback(initialize);

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', '-119.514969636354'], ['W80.02-03', 'Off', new Date(2011, 10, 5, 23, 0, 0, 0), 4, 0, 440.69, '36.4448820059074', '-119.514974754472'], ['W80.03-01', 'Off', new Date(2011, 9, 15, 9, 0, 0, 0), 8.6, 0, 407.78, '36.437507009106', '-119.515035782307'], ['W80.05-02', 'Off', new Date(2011, 9, 27, 9, 0, 0, 0), 4, 0, 549.64, '36.4231709808368', '-119.517354227261'], ['W80.07-01', 'Off', new Date(2011, 10, 1, 7, 0, 0, 0), 1.82, 0, 754.77, '36.4012152482115', '-119.519478995004'], ['W83.10-03', 'On', new Date(2011, 9, 7, 9, 0, 0, 0), 1.74, 0, 308.06, '36.4700305402749', '-119.528490509191'], ['W83.11-01', 'On', new Date(2011, 9, 20, 9, 0, 0, 0),...