google maps: weighted heatmap with fusionTable-data

see:http://stackoverflow.com/questions/14990628/google-maps-mvcarray-with-fusion-tables#comment21080673_14990628

by Kieran Dang

HTML

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;libraries=visualization&amp;.js"></script>
<div id="map_canvas" style="height:300px;"></div>

JavaScript

function initialize() {
    var mapOptions = {
        zoom: 10,
        center: new google.maps.LatLng(-37.826869, 145.007098),
        mapTypeId: google.maps.MapTypeId.HYBRID
    };
    map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);

    //query the fusiontable via ajax    
    $.ajax({
        dataType: 'jsonp',
        url: 'https://www.googleapis.com/fusiontables/v1/query',
        data: {
            sql: 'SELECT Lat,Long,Hits \
from 1LL0eWI89nGxJ17XZDbWKsWahPyzQCAH8MHoAPSk',
            key: 'AIzaSyCoiF1SlcuQPqoRdbP58ZCi3YrPx4wvMfg'
        },
        success: function (data) {
            var heatMapData = [];
            //prepare the data
            $.each(data.rows, function (i, r) {
                heatMapData.push({
                    location: new google.maps.LatLng(r[0], r[1]),
                    weight: Number(r[2])
                });
            });
            //create the weighted heatmap
            new google.maps.visualization.HeatmapLayer({
                data: heatMapData,
                map: map
            });
        }
    });
}

google.maps.event.addDomListener(window, 'load', initialize);