google.load('visualization', '1', {'packages': ['geomap']});
google.setOnLoadCallback(drawMap);
 
function drawMap() {
        $.getJSON("/usuarios/mapa_usuarios",{},dates);
       
        function dates(data) {
            dataTable = new google.visualization.DataTable();
            dataTable.addRows(data.length);
            dataTable.addColumn('number', 'LATITUDE', 'Latitude');
            dataTable.addColumn('number', 'LONGITUDE', 'Longitude');
            dataTable.addColumn('number', 'Porcentaje', 'Value'); // Won't use this column, but still must define it.
            dataTable.addColumn('string', 'HOVER', 'HoverText');
           
            for (var i = 0; i < data.length; i++) {
                dataTable.setValue(i,0,data[i][1]);
                dataTable.setValue(i,1,data[i][2]);
                dataTable.setValue(i,2,data[i][0]);
                dataTable.setValue(i,3,data[i][3]);
            }
       

            var options = {};
            options['region'] = 'MX';
            options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
            options['dataMode'] = 'markers';

            var container = document.getElementById('map_canvas');
            var geomap = new google.visualization.GeoMap(container);
            geomap.draw(dataTable, options);
        }
};