Loader Example

HTML

<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="visualization" class="loader"></div>

CSS

.loader {
    background: rgba( 255, 255, 255, .8 ) 
                url('http://i.stack.imgur.com/FhHRx.gif') 
                50% 50% 
                no-repeat;

}

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:'US',f:'US<br/>11111'},0,'']]);
 ivalue['US'] = 'Example';

 var options = {
 backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 },
 colorAxis:  {minValue: 0, maxValue: 0,  colors: ['#E7FF12',]},
 legend: 'none',    
 backgroundColor: {fill:'#FFFFFF',stroke:'#FFFFFF' ,strokeWidth:0 },    
 datalessRegionColor: '#f5f5f5',
 displayMode: 'regions', 
 enableRegionInteractivity: 'true', 
 resolution: 'countries',
 sizeAxis: {minValue: 1, maxValue:1,minSize:10,  maxSize: 10},
 region:'world',
 keepAspectRatio: true,
 width:500,
 height:400,
 tooltip: {textStyle: {color: '#444444'}, trigger:'focus'}    
 };
  var chart = new google.visualization.GeoChart(document.getElementById('visualization')); 
/* THIS IS NEW CODE */                                                google.visualization.events.addListener(chart, 'ready', function () {
                                                  
                                                  $('#visualization').removeClass('loader');
                                                  
                                                  });
                                                  
/* NEW CODE ENDS HERE */                                                   
 chart.draw(data, options);
 }