elizabeth-shell-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
        snowMap: [],

        // 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+1YCWUgdijQpWzibFv9y2HObnFF4bG5OQUYruPus7V&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 location = 0;
            var latitude = 1;
            var longitude = 2;
            var normal = 3;
            var total = 4;
            var percentOfNormal = 5;

            // 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];
                var lat = parseFloat(row[latitude]);
                var lng = parseFloat(row[longitude]);
                var cityLatLng = new google.maps.LatLng(lat, lng)

                // build our circle object
                fn.snowMap[parseInt(i)] = {
                    'center': cityLatLng,
                    'formula': parseInt(row[percentOfNormal]),
                    'fillColor': "red",
                    'location': row[location],
                    'normal': row[normal],
                    'total': row[total],
                    'percentOfNormal': row[percentOfNormal]
                }
            }

            // see what our array of circle objects looks like
            console.log(fn.snowMap);

            // create the map based on the div id
            fn.createMap("map-canvas");
...