MadCity Camp Walkthrough

Showing 2009 Bike Accidents in Madison, Wis.

by chrislkeller

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<!-- begin map container -->
<div id="map-container">
    <h2>Madison Bike Accidents in 2011</h2>
    
<div id="map_canvas"></div>

<div id="map-explainer">
    <h3>Click the map icons to learn about the bike accident displayed

    <div id="data-display"></div>
    
</div>

<div id="json-export"></div>        
        
</div>
<!-- end map container -->

CSS

#map-container {display: block; width: 620px; height: 600px; margin: 0 auto 0 auto;}
#map_canvas {display: block; width: 600px; height:300px; margin: 10px auto 10px auto;}
#map-explainer {display: block; width: 600px; height: 200;}
#data-display {display: block; width: 600px; height: 200; margin: 20px auto 0 auto;}
#json-export {display: block; width: 600px; height: 200;}

JavaScript

var map;
var layer;
var latlng = new google.maps.LatLng(43.07340216393559, -89.38751220703125);
var zoom = 11;

//begin main function
    $(document).ready(function() {
        createMap();
    });
//end main function

function createMap() {
    // Initialize the map
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        center: latlng,
        zoom: zoom,
        scrollwheel: false,
        disableDragging: true,
        mapTypeControl: false,
        navigationControl: true,
        streetViewControl: false,
        scaleControl: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.LARGE,
            position: google.maps.ControlPosition.RIGHT_TOP
        }
    });
    
    //set fusion tables layer
    layer = new google.maps.FusionTablesLayer(4290602, {suppressInfoWindows: true});
    layer.setQuery("SELECT Latitude FROM 4290602");
    layer.setMap(map);
    
        //create the click event and return data 
        // from table to a div on the page
        google.maps.event.addListener(layer, 'click', function(e) {
            $('#data-display').html(
            '<h3>Date &amp; Time of Accident: ' + e.row['Date/Time'].value + '</h3>' +
            '<p><strong>Accident Type: </strong>' + e.row['Type'].value + '</p>' +
            '<p><strong>Location: </strong>' + e.row['Accident_location'].value + '</p>' + 
            '<p><strong>Contributing Factors: </strong>' + e.row['Contributing Factors'].value + '</p>');
    });
    
}
//end write map