public with sharing class testCon 
{
   Public AggregateResult[] myData{get; set;}
   public  Map<String,Integer > FinalData {get;set;}
   public String JsonMap{get;set;}  
     
    Public Integer Count{get; set;}
   
    Public testCon()
    { 
        FinalData= new Map<String,Integer >();
       myData = [SELECT Collateral_State__c  State, Count(Name) NbrOfCollaterals FROM 
                        Collateral__c where Overall_Status__c = 'Active' and                                                              Collateral_State__c != null group by Collateral_State__c ];
       Count = Integer.valueOf(myData.size());
       
       for ( AggregateResult ar : myData)
       {
         
        FinalData.put(string.valueof(ar.get('State')),integer.Valueof(ar.get('NbrOfCollaterals')));
         
                
       }
       
        JsonMap=JSON.serialize(FinalData); 
       
        
    }
  
     
}

<apex:page controller="testCon" readOnly="true">
    <apex:includeScript value="https://www.gstatic.com/charts/loader.js" />
    <apex:includeScript value="https://www.google.com/jsapi" />
    
    <script type="text/javascript">
    
        google.charts.load('current', {'packages':['geochart'],'mapsApiKey': 'MyKey' });
       
        var cnt = {!Count};
       
         google.charts.setOnLoadCallback(drawRegionsMap);
         
        function drawRegionsMap() {
     
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'State');
            data.addColumn('number', 'Number of Collaterals');
            
            data.addRow(['Illinois',1]); // Just a sample static data for illustration
            
              
            var DataMap= JSON.parse('{!JsonMap}');
            
            alert(DataMap);
            
            for (var key in DataMap) {
           if (DataMap.hasOwnProperty(key)) {
           
           alert(key + " -> " + DataMap[key]);
           
           data.addRow([key ,DataMap[key]]);
           
           }
        }
           
            var options = {
            region: 'US',
            displayMode: 'markers',
            backgroundColor: '#75a3e7',
            datalessRegionColor: '#f2f2f2',
            colorAxis: {colors: ['green', 'blue']
      
            }
      };

       //Getting the GeoChart Div Container
       var chart = new 
       google.visualization.GeoChart(document.getElementById('chart_div'));
 
     //Drawing the GeoChart with Data and Options
       chart.draw(data, options);
  }
   
   </script>
   <div id="chart_div" style="width: 900px; height: 500px;"></div>
</apex:page>