[visualization-api] heatmap/map visualization stopped working suddenly

Sun, 13 Oct 2013 09:34:35 -0700 

I'm working on a disease surveillance program using Google's 
mapping/visualization API and my heatmap suddenly stopped working a few 
days ago, both on the web server and on my local machine. The console error 
reads "Failed to load 
resource: 
file://gg.google.com/csi?s=uds&v=2&action=al_visualization&it=jl.203". 

The map basically 1) doesn't show up and 2) the controls have been shifted 
to the left for some reason. 

Originally it looked like this example:
https://developers.google.com/maps/documentation/javascript/examples/layer-heatmap

All of the code (that worked previously) is pasted below. I also attached 
it to this email. I cobbled it together (partly thanks to the great help on 
this forum), but I'm a novice at this so I haven't been able to figure this 
out. 


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  <title>RICE2: Mobile Disease Surveillance in Vietnam
</title>
<link 
href="https://developers.google.com/maps/documentation/javascript/examples/default.css";
 
rel="stylesheet">
     <script type="text/javascript" 
src="http://www.google.com/jsapi";></script>
     
    <script type="text/javascript">
      google.load('visualization', '1.1', {packages: ['controls', 
'corechart']});
    </script>
  <style>
a:link {color:#000000;}    /* unvisited link */
a:visited {color:#000000;} /* visited link */
a:hover {color:#000000;}   /* mouse over link */
a:active {color:#000000;}  /* selected link */
</style>
  
    <script 
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=visualization";></script>

    <script>
    
var map, pointarray, heatmap;

var heatmapData = new Array();

// Create a <script> tag and set the USGS URL as the source.
var script = document.createElement('script');
script.src = 
'http://spreadsheets.google.com/feeds/list/0Aurg0HdD8rrFdDFIUE45MzdOUndDUW9taC14ZGRrWnc/1/public/values?alt=json-in-script&amp;callback=importGSS';
document.getElementsByTagName('head')[0].appendChild(script);
    
function skeleton() {};

if (!gdata) {
var gdata = new skeleton(); }
gdata.io = new skeleton();
gdata.io.handleScriptLoaded = function(data)
{
gdata(data);
}
    
// Loop through the results array and place a marker for each
// set of coordinates.

function gdata(results){
for (var i = 0; i < results.feed.entry.length; i++) {
var incident = results.feed.entry[i];
var latitude = incident.gsx$lat.$t;
var longitude = incident.gsx$long.$t;
var latLng = new google.maps.LatLng(latitude,longitude);
var marker = new google.maps.Marker({
            position: latLng,
            map: map
});
        
        heatmapData.push(new google.maps.LatLng(latitude,longitude));
    }
}
      
var map, pointarray, heatmap;
function initialize() {

var mapOptions = {
center: new google.maps.LatLng(20.7, 105.3),
zoom: 8,
    mapTypeId: google.maps.MapTypeId.TERRAIN
};
        
map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);

  var pointArray = new google.maps.MVCArray(heatmapData);

heatmap = new google.maps.visualization.HeatmapLayer({
data: pointArray,
dissipating: false,
radius: .12
});

heatmap.setMap(map);
};
 
function toggleHeatmap() {
  heatmap.setMap(heatmap.getMap() ? null : map);
}

function changeGradient() {
  var gradient = [
    'rgba(0, 255, 255, 0)',
    'rgba(0, 255, 255, 1)',
    'rgba(0, 191, 255, 1)',
    'rgba(0, 127, 255, 1)',
    'rgba(0, 63, 255, 1)',
    'rgba(0, 0, 255, 1)',
    'rgba(0, 0, 223, 1)',
    'rgba(0, 0, 191, 1)',
    'rgba(0, 0, 159, 1)',
    'rgba(0, 0, 127, 1)',
    'rgba(63, 0, 91, 1)',
    'rgba(127, 0, 63, 1)',
    'rgba(191, 0, 31, 1)',
    'rgba(255, 0, 0, 1)'
  ]
  heatmap.setOptions({
    gradient: heatmap.get('gradient') ? null : gradient
  });
}

function changeRadius() {
  heatmap.setOptions({radius: heatmap.get('radius') ? null : .12});
}

function changeOpacity() {
  heatmap.setOptions({opacity: heatmap.get('opacity') ? null : 0.2});
}


</script>

</head>
<body onload="initialize()">
<table cellpadding="0" cellspacing="0">
<tr>
<td style='width: 50%'>
<div style="font-size: small; font-family:  Menlo, Lucida Sans Unicode">
RICE2: live SMS-based disease surveillance & outbreak detection in northern 
Vietnam
</div>
</td>
<td style='width: 50%'>
<div style="font-size: small; font-family:  Menlo, Lucida Sans Unicode"><p 
align="right"><a href=chart.html>chart</a> | <a href=table.html>table</a> | 
<a href=time.html>time</a> | <a href=heatmap.html>heatmap</a> | <a 
href=rawdata.html>raw data</a> | <a href=index.html>home</a></p>
</div>
</td>
</table>
    <div id="panel" style="top: 37px">
      <button onclick="toggleHeatmap()">Toggle Heatmap</button>
      <button onclick="changeGradient()">Change gradient</button>
      <button onclick="changeOpacity()">Change opacity</button>
    </div>
<div id="map_canvas" style="width:100%"></div>
</body>
</html>

-- 
You received this message because you are subscribed to the Google Groups 
"Google Visualization API" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.

<<< text/html; charset=US-ASCII; name=heatmap.html: Unrecognized >>>

Reply via email to