Geochart API tryout

by cmoreira

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
 <div id='map_canvas'></div>

CSS

#map_canvas {
    background-image:url('http://www.landmarkartscentre.org/i/l/lac-map-280x266-v2.jpg');
}

JavaScript

google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawVisualization);

  function drawVisualization() {var data = new google.visualization.DataTable();

 data.addColumn('string', 'Country');
 data.addColumn('number', 'Value'); 
 data.addColumn({type:'string', role:'tooltip'});var ivalue = new Array();

 data.addRows([[{v:'New Jersey',f:'New Jersey'},0,'Test']]);
 ivalue['New Jersey'] = '#';

 var options = {
 backgroundColor: {fill:'transparent',stroke:'#FFFFFF' ,strokeWidth:0 },
 colorAxis:  {minValue: 0, maxValue: 0,  colors: ['#FF983D',]},
 legend: 'none',	
 backgroundColor: {fill:'transparent',stroke:'#FFFFFF' ,strokeWidth:0 },	
 datalessRegionColor: 'transparent',
 displayMode: 'markers', 
 enableRegionInteractivity: 'true', 
 resolution: 'provinces',
 sizeAxis: {minValue: 1, maxValue:1,minSize:10,  maxSize: 10},
 region:'US-NJ',
 keepAspectRatio: true,
 width:600,
 height:400,
 tooltip: {textStyle: {color: '#444444'}, trigger:'focus'}	
 };
  var chart = new google.visualization.GeoChart(document.getElementById('map_canvas')); 
 chart.draw(data, options);
 }