Dynamic Styling Based on Votes

Uses the Google Maps API to style a map based on Fusion Table data.

by chrislkeller

HTML

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

<div id="map_canvas"></div>

CSS

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

JavaScript

var map;
var latlng = new google.maps.LatLng(43.083433,-89.403305);
var mapLayer = 835224;
var mapZoom = 11;

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


function createMap() {
    var options = {
        zoom: mapZoom,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false,
        draggable: true,
        mapTypeControl: false,
        navigationControl: true,
        streetViewControl: false,
        panControl: false,
        scaleControl: true,
        navigationControlOptions: {
            style: google.maps.NavigationControlStyle.LARGE,
            position: google.maps.ControlPosition.RIGHT_TOP
        }
    };

    //write the map
    var map = new google.maps.Map(document.getElementById('map_canvas'), options);



    layer = new google.maps.FusionTablesLayer(mapLayer, {suppressInfoWindows: true});
    layer.setQuery("SELECT geometry FROM " + mapLayer);
    
    layer = new google.maps.FusionTablesLayer({
        query: {
            select: 'geometry',
            from: mapLayer
        },
        styles: [{
        where: "Vote_margin < -100",
            polygonOptions: {
                strokeColor: "#ffffff",
                strokeWeight: "1.0",
                fillColor: "#000000",
                fillOpacity: 1.0
            }
        }, {
        where: "Vote_margin < 0",
            polygonOptions: {
                strokeColor: "#2ca25f",
                strokeWeight: "1.0",
                fillColor: "#2ca25f",
                fillOpacity: 1.0
            }
        }, {
        where: "Vote_margin = 0",
            polygonOptions: {
                strokeColor: "#ffffff",
                strokeWeight: "1.0",
                fillColor: "#ffffff",
                fillOpacity: 1.0
            }
        }, {
        where: "Vote_margin > 0",
            polygonOptions: {
                strokeColor: "#ffffff",
                strokeWeight: "1.0",
  ...