ft-api-circle-map

A quick example of creating circle objects from data in a Fusion table and adding them to a map...

by chrislkeller

HTML

<script src="http://maps.google.com/maps/api/js?key=AIzaSyBJj_v-VYk6V7vzOIlIj88DiteiuMfpdN4&amp;sensor=false&amp;region=us"></script>
<!-- begin map container -->
<div id="map-container">
    <div id="map-canvas"></div>
</div>
<!-- end map container -->

CSS

#map-canvas {
        width: 620px;
        height: 600px;
    }
    .circleBase {
        -moz-border-radius: 999px;
        /* Firefox */
        -webkit-border-radius: 999px;
        /* Safari and Chrome */
        border-radius: 999px;
        /* Opera 10.5+, future browsers, and now also Internet Explorer 6+ using IE-CSS3 */
        behavior: url(ie-css3.htc);
        /* This lets IE know to call the script on all elements which get the 'box' class */
        float: left;
    }
    .barrettcircle {
        width: 25px;
        height: 25px;
        background: #37949b;
        opacity: .7
    }
    .falkcircle {
        width: 25px;
        height: 25px;
        background: #5341BF;
        opacity: .7
    }

JavaScript

var fn = fn || {};

    // begin main function
    $(document).ready(function () {
        fn.retrieveData();
    });

    // begin data configuration object
    var fn = {

        // array to hold our circle objects
        countyMap: [],

        // array to hold info windows we construct
        infoWindows: [],

        // retrieve json from fusion table
        retrieveData: function () {
            $.getJSON("https://www.googleapis.com/fusiontables/v1/query?sql=SELECT+*FROM+1OHzhoE2ARzIh0fCfGTn7A9hMIit4neAnlS49oZI&key=AIzaSyBJj_v-VYk6V7vzOIlIj88DiteiuMfpdN4", fn.processData)
        },

        // process json from fusion table
        processData: function (data) {

            // see the data coming back from the fusion tables api
            console.log(data);

            // shortcuts for accessing columns
            var cityLatLngColumn = 3;
            var cityNameColumn = 5;
            var precinctsColumn = 4;
            var falkVotesColumn = 6;
            var falkPctColumn = 7;
            var barrettVotesColumn = 8;
            var barrettPctColumn = 9;
            var cityFormulaColumn = 13;
            var marginColumn = 12;
            var cityColorColumn = 16;

            // loop through the rows to build a circle object for each
            for (var i = 0; i < data.rows.length; i++) {
                var row = data.rows[i];

                // json source has lat/lng in a single column. split it on comma
                var cityLatLngRaw = row[cityLatLngColumn];
                var commaPos = cityLatLngRaw.indexOf(',');
                var lat = parseFloat(cityLatLngRaw.substring(0, commaPos));
                var lng = parseFloat(cityLatLngRaw.substring(commaPos + 2, cityLatLngRaw.length));
                var cityLatLng = new google.maps.LatLng(lat, lng)


                // build our circle object
                fn.countyMap[parseInt(i)] = {
                    'center': cityLatLng,
                        'formula':...