Geochart - Republica Mexicana

Sencillo ejemplo de como utilizar el Geochart de los "Graficos de Google".

Como se puede apreciar en la siguiente imagen el mapa muestra todos los estados de la republica mexicana, teñidos en distintos colores de los cuales indican la cantidad de población del país, ademas si se acerca el cursor ha alguno de ellos aparace un pequeño tooltip con el nombre del estado y la población del estado en el año 2013. 

¿Como funciona geochart en este ejemplo?

Lo primero que tenemos que hacer es referciar el api ajax de google charts con la siguiente linea script:

<script type='text/javascript' src='https://www.google.com/jsapi'></script>

Ahora si ya que tenemos refenciado la api, lo que continua es configurar el api para indicar que tipo de gráfico es que queremos presentar en nuestra pagina web, para eso utilizamos la siguientes lineas de codigo:

//Cargar el API de visualización y el paquete GeoChart.
     google.load('visualization', '1', {'packages': ['geochart']});
     //una devolución de llamada que se ejecutará cuando se carga el API de visualización de Google.
     google.setOnLoadCallback(drawRegionsMap);

En la segunda linea de codigo podemos apreciar que se llama a la función 'drawRegionsMap',dicha función es la encargada de crear y rellenar la tabla de datos que requiere nuestro mapa para poder ser visualizado.

 function drawRegionsMap() {
    // se crea un arreglo, donde se indica que la primera linea como se va a particionar el mapa, nombre del estado y tamaño de la población.
        var data = google.visualization.arrayToDataTable([
          ['States','Estado','Poblacion (2013)'],   
          ['MX-MEX','Estado de Mexico',16396826],
          ['MX-DIF','Distrito Federal',8891375],
          ['MX-VER','Veracruz',7931295],
          ['MX-JAL','Jalisco',7754609],
          ['MX-PUE','Puebla',6075839],
          ['MX-GUA','Guanajuato',5726157],
          ['MX-CHP','Chiapas',5127866],
          ['MX-NLE','Nuevo Leon',4950328],
          ['MX-MIC','Michoacan de Ocampo',4534280],
          ['MX-OAX','Oaxaca',3962574],
          ['MX-CHH','Chihuahua',3640680],

                       ...

          ['MX-ZAC','Zacatecas',1551805],
          ['MX-ROO','Quintana Roo',1490711],
          ['MX-AGU','Aguascalientes',1254540],
          ['MX-TLA','Tlaxcala',1245022],
          ['MX-NAY','Nayarit',1181299],
          ['MX-CAM','Campeche',882076],
          ['MX-BCS','Baja California Sur',721106],
          ['MX-COL','Colima',699909]
        ]);

OJO aquí no se ha terminado de configurar la función pero creí conveniente hacer un parentesis para explicar la notación que se esta utlizando en la primera columna, esta notación se conoce como "ISO 3166-2: MX es la entrada de México en la norma ISO 3166-2 , parte de la ISO 3166 estándar publicado por la Organización Internacional de Normalización (ISO), que define los códigos para los nombres de las principales subdivisiones (por ejemplo, provincias o estados ) de todos los países codificados en ISO 3166-1 [Fragmento Extraido de esta fuente]".

Ahora si continuamos con la función, el siguiente codigo es un arreglo el cual se encarga de configurar las opciones que deberá tener nuestro mapa.

var options = 
    {
        legend: 'none', // se quita el slider indicador de poblacion minima y maxima
        //tooltip: {trigger:'none'}, //oculta el tooltip
        region: 'MX',   // region a dibujar en el mapa
        resolution: 'provinces',    //forma en la que se seccionará el mapa
        // color minimo: 'LightYellow' y color maximo: 'Salmon', igual se pueden utilizar los valor rgb.
        colorAxis: {colors: ['LightYellow', 'Salmon'] }
    };
    //se instacia y se dibuja el grafico
    var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    chart.draw(data, options);
};

y por último lo que restaría es indicar con un div donde queremos que se muestre nuestro mapa.

<!--div donde se dibujara nuestro mapa-->

<div id="chart_div" style="width: 900px; height: 500px;"></div>

Acontinuación dejo el link de descarga de archivo, para que practiques con el mapa.

conforme valla terminando con los ejemplos los ire subiendo, saludos.