Fusion Tables

var that = this;
if (params.fusion) {
    var loadingElement = "<div class='mapsLoading' style='position: absolute; left: 45%; top: 5%; background: #fff; border: 1px solid #000; padding: 5px;'>Loading...</div>";
    elem.append(loadingElement)

    that.fusionRequest(params.fusion.states, 'name, geometry', null);

    google.maps.event.addListener(that.map, 'zoom_changed', function() {
        elem.append(loadingElement)

        var zoomValue = this.getZoom();
        var mapCenter = this.getCenter();

        for (var key in that.polygons) {
            that.polygons[key].setMap(null);
            delete(that.polygons[key]);
        }

        if (zoomValue > 7 && zoomValue < 11) {
            that.fusionRequest(
                    params.fusion.cities,
                    'name, geometry',
                    'WHERE ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + mapCenter.lat() + ',' + mapCenter.lng() + '), 100000))'
            );
        } else if (zoomValue <= 7) {
            that.fusionRequest(params.fusion.states, 'name, geometry', null);
        } else if (zoomValue >= 11) {
            that.fusionRequest(
                    params.fusion.zip,
                    'ZIP, geometry',
                    'WHERE ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + mapCenter.lat() + ',' + mapCenter.lng() + '), 100000))'
            );
        }
    });

    google.maps.event.addListener(that.map, 'dragend', function() {
        var zoomValue = this.getZoom();
        var mapCenter = this.getCenter();
        var key;

        if (zoomValue > 7 && zoomValue < 10) {
            elem.append(loadingElement)

            for (key in that.polygons) {
                that.polygons[key].setMap(null);
                delete(that.polygons[key]);
            }

            that.fusionRequest(
                    params.fusion.cities,
                    'name, geometry',
                    'WHERE ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + mapCenter.lat() + ',' + mapCenter.lng() + '), 100000))'
            );
        } else if (zoomValue >= 10) {
            elem.append(loadingElement)

            for (key in that.polygons) {
                that.polygons[key].setMap(null);
                delete(that.polygons[key]);
            }

            that.fusionRequest(
                    params.fusion.zip,
                    'ZIP, geometry',
                    'WHERE ST_INTERSECTS(geometry, CIRCLE(LATLNG(' + mapCenter.lat() + ',' + mapCenter.lng() + '), 100000))'
            );
        }
    });
}



fusionRequest: function(table, select, clause) {
    "use strict";

    $("script.fusionApi").remove();

    var self = this;
    var polygons = this.polygons;
    var colors = ['#00FF00'];
    var script = document.createElement('script');
    script.className = "fusionApi";
    var baseApiUrl = 'https://www.googleapis.com/fusiontables/v1/query?' +
            'key=%your_key_here%' +
            '&callback=drawMap';
    var url = [baseApiUrl];
    url.push('&sql=');
    var query = 'SELECT ' + select + ' FROM ' + table;
    if (clause) {
        query += ' ' + clause;
    }
    var encodedQuery = encodeURIComponent(query);
    url.push(encodedQuery);
    script.src = url.join('');
    var body = document.getElementsByTagName('body')[0];
    body.appendChild(script);

}


window.drawMap = function(data) {
    var rows = data['rows'];
    for (var i in rows) {
        var newCoordinates = [];
        var geometries = rows[i][1]['geometries'];
        if (geometries) {
            for (var j in geometries) {
                newCoordinates.push(constructNewCoordinates(geometries[j]));
            }
        } else {
            newCoordinates = constructNewCoordinates(rows[i][1]['geometry']);
        }
        var element = new google.maps.Polygon({
            paths: newCoordinates,
            strokeColor: "#000000",
            strokeOpacity: 0.4,
            strokeWeight: 1,
            fillColor: colors[0],
            fillOpacity: 0.3
        });

        google.maps.event.addListener(element, 'mouseover', function() {
            this.setOptions({fillOpacity: 1});
        });

        google.maps.event.addListener(element, 'mouseout', function() {
            this.setOptions({fillOpacity: 0.3});
        });

        self.onPolyClick(element, rows, i);
        polygons.push(element);
        element.setMap(self.map);
    }
    self.element.find(".mapsLoading").remove();
};

window.constructNewCoordinates = function(polygon) {
    var newCoordinates = [];
    var coordinates = polygon['coordinates'][0];
    for (var i in coordinates) {
        newCoordinates.push(new google.maps.LatLng(coordinates[i][1], coordinates[i][0]));
    }
    return newCoordinates;
};