Turnout Map - Deliveries

map showing the turnouts as they are presented on the Deliveries Console

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='map_canvas'></div></p>

CSS

#map_canvas { 
    height: 200px;
    width: 200px;
}

JavaScript

var Turnouts = [["2011", "O47.28-03", "36.48722227338", "-119.362276711668"],
    ["2011", "X89.28-01", "36.4724287933397", "-119.328703967414"],
    ["2011", "X89.28-02", "36.4724287444592", "-119.328726737502"],
    ["2011", "X89.29-02", "36.4724987371162", "-119.339728577248"],
    ["2011", "X89.30-03", "36.4725345204772", "-119.349357501824"],
    ["2011", "X89.31-01", "36.4653467623703", "-119.349488641336"],
    ["2011", "X89.32-02", "36.4653632973007", "-119.361351948568"]];

var map = new google.maps.Map(document.getElementById('map_canvas'), 
      {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        streetViewControl: false,
        zoomControl: false,
        mapTypeControl: false
    });
    
google.setOnLoadCallback(drawMap);

function drawMap() {
    var bounds = new google.maps.LatLngBounds();
    $(Turnouts).each(function(index, value) {
        var point = new google.maps.LatLng(value[2], value[3]);
        var marker = new google.maps.Marker({
            map: map,
            position: point,
            title: value[1]
        });
        bounds.extend(point);        
    });
    map.setCenter(bounds.getCenter());
    map.fitBounds(bounds);
}