arrays - Google Maps MVCArray With Fusion Tables -
probably rookie question, i've created heatmap-layer html file using hard coded locations within html file. below sample of code. i'm trying replace "heatmapdata" info fusion table. goal map update whenever fusion table updated. help appreciated.
var heatmapdata = [{location: new google.maps.latlng(42.071523,-72.624257), weight:4.2}, {location: new google.maps.latlng(42.37686,-72.46914), weight:1.6} ]; function initialize() { var mapoptions = { zoom: 4, center: new google.maps.latlng(38.82, -99.408660), maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid('map_canvas'), mapoptions); pointarray = new google.maps.mvcarray(heatmapdata); heatmap = new google.maps.visualization.heatmaplayer({ data: pointarray }); heatmap.setmap(map); } using illustration site dr molle posted can't seem render heat map when alter fusion table id reference (it has same column names: lat, long, hits). ideas?
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>test map</title> <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script> <link rel="stylesheet" type="text/css" href="/css/normalize.css"> <link rel="stylesheet" type="text/css" href="/css/result-light.css"> <script type='text/javascript' src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization&.js"></script> <style type='text/css'> </style> <script type='text/javascript'>//<![cdata[ function initialize() { var mapoptions = { zoom: 4, center: new google.maps.latlng(38.82, -99.408660), maptypeid: google.maps.maptypeid.roadmap }; map = new google.maps.map(document.getelementbyid('map_canvas'), mapoptions); //query fusiontable via ajax $.ajax( { datatype: 'jsonp', url : 'https://www.googleapis.com/fusiontables/v1/query', info : { sql:'select lat,long,hits \ 1jsyexl-bz0dse02llf9cuquxku0mqh6jluynhle', key:'aizasycoif1slcuqpqordbp58zci3yrpx4wvmfg' }, success: function(data){ var heatmapdata=[]; //prepare info $.each(data.rows,function(i,r){ heatmapdata.push({ location:new google.maps.latlng(r[0],r[1]), weight:number(r[2]) }); }); //create weighted heatmap new google.maps.visualization.heatmaplayer({ data: heatmapdata,map:map }); } }); } google.maps.event.adddomlistener(window, 'load', initialize); //]]> </script> </head> <body> <div id="map_canvas" style="height: 800px; width: 1000px;"></div> </body> </html>
you may query fusiontable , create info layer response.
example(using jquery , ajax):
$.ajax( { datatype: 'jsonp', url : 'https://www.googleapis.com/fusiontables/v1/query', info : { sql:'select lat,long,hits \ 1ll0ewi89ngxj17xzdbwkswahpyzqcah8mhoapsk', key:'yourkey' }, success: function(data){ var heatmapdata=[]; //prepare info $.each(data.rows,function(i,r){ heatmapdata.push({ location:new google.maps.latlng(r[0],r[1]), weight:number(r[2]) }); }); //create weighted heatmap new google.maps.visualization.heatmaplayer({ data: heatmapdata,map:map }); } }); demo: http://jsfiddle.net/doktormolle/rxmdf/
note: when utilize ajax must utilize jsonp bypass browsers same-origin-restrictions. of course of study may request info on serverside.
however, if it's usable in application depends on amount of data, because finish data(location , weight) must downloaded client.
arrays google-maps-api-3 google-fusion-tables heatmap
No comments:
Post a Comment