Descripción general
Un mapa geográfico es un mapa de un país, continente o región, con colores y valores asignados a regiones específicas. Los valores se muestran como una escala de color, y puedes especificar un texto flotante opcional para las regiones. El mapa se procesa en el navegador mediante un reproductor Flash incorporado. Ten en cuenta que el mapa no se puede desplazar ni arrastrar, pero puedes configurarlo para permitir el zoom.
Ejemplos
Aquí tenemos dos ejemplos: uno que usa el estilo de visualización de las regiones y otro que usa el estilo de visualización de marcadores.
Ejemplo de regiones
El estilo de regiones abarca regiones completas (por lo general, países) con colores correspondientes a los valores que asignas. Para especificar el estilo de las regiones, asigna options['dataMode']
= 'regions'
en tu código.
<html> <head> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', { 'packages':['geomap'], // Note: you will need to get a mapsApiKey for your project. // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings 'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY' }); google.charts.setOnLoadCallback(drawMap); function drawMap() { var data = google.visualization.arrayToDataTable([ ['Country', 'Popularity'], ['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['RU', 700] ]); var options = {}; options['dataMode'] = 'regions'; var container = document.getElementById('regions_div'); var geomap = new google.visualization.GeoMap(container); geomap.draw(data, options); }; </script> </head> <body> <div id="regions_div" style="width: 900px; height: 500px;"></div> </body> </html>
Ejemplo de marcadores
El estilo "marcadores" muestra un círculo de tamaño y color para indicar un valor en las regiones que especifiques.
<html> <head> <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script> <script type='text/javascript'> google.charts.load('current', {'packages': ['geomap']}); google.charts.setOnLoadCallback(drawMap); function drawMap() { var data = google.visualization.arrayToDataTable([ ['City', 'Popularity'], ['New York', 200], ['Boston', 300], ['Miami', 400], ['Chicago', 500], ['Los Angeles', 600], ['Houston', 700] ]); var options = {}; options['region'] = 'US'; 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(data, options); }; </script> </head> <body> <div id='map_canvas'></div> </body> </html>
Cargando
El nombre del paquete google.charts.load
es "geomap"
google.charts.load('current', {'packages': ['geomap']});
El nombre de la clase de visualización del mapa geográfico es google.visualization.GeoMap
var visualization = new google.visualization.GeoMap(container);
Formato de los datos
Se admiten dos formatos de dirección, cada uno de los cuales admite un número distinto de columnas y tipos de datos distintos para cada columna. Todas las direcciones de la tabla deben usar una de las dos. No puedes combinar tipos.
- Formato 1: Ubicaciones de latitud/longitud Este formato solo funciona cuando la opción
dataMode
es "markers". Si se usa este formato, no es necesario que incluyas JavaScript en Google Maps. La ubicación se ingresa en dos columnas más dos columnas opcionales:- [Number, required] Una latitud. Los números positivos son el norte, los números negativos son el sur.
- [Number, Required] Longitud. Los números positivos son el este y los negativos, el oeste.
- [Número, opcional] Un valor numérico que se muestra cuando el usuario se desplaza sobre esta región. Si se usa la columna 4, esta columna es obligatoria.
- [String, opcional] Texto de string adicional que se muestra cuando el usuario se desplaza sobre esta región.
- Formato 2: dirección, nombre del país, ubicaciones de nombres de regiones o códigos de área metropolitana de EE.UU. Este formato funciona con la opción
dataMode
configurada como "marcadores" o "regiones". La ubicación se ingresa en una columna más dos columnas opcionales:- [String, obligatoria] Una ubicación en el mapa. Se aceptan los siguientes formatos:
- Una dirección específica (por ejemplo, “1600 Pennsylvania Ave.”).
- Un nombre de país como una string (por ejemplo, "Inglaterra") o un código ISO-3166 en mayúscula o su texto en inglés equivalente (por ejemplo, "GB" o "Reino Unido").
- Un nombre de código de región ISO-3166-2 en mayúsculas o su equivalente en texto en inglés (por ejemplo, "US-NJ" o "Nueva Jersey"). Nota: Las regiones solo se pueden especificar cuando la opción dataMode está configurada en “regions”.
- Un código de área metropolitana. Estos son códigos de área metropolitana de tres dígitos que se utilizan para designar varias regiones. Solo se admiten códigos de EE.UU. Ten en cuenta que no son los mismos que los códigos de área telefónicos.
- [Número, opcional] Un valor numérico que se muestra cuando el usuario se desplaza sobre esta región. Si se usa la columna 3, esta columna es obligatoria.
- [String, opcional] Texto de string adicional que se muestra cuando el usuario se desplaza sobre esta región.
- [String, obligatoria] Una ubicación en el mapa. Se aceptan los siguientes formatos:
Nota: Un mapa puede mostrar un máximo de 400 entradas; si tu DataTable o DataView contienen más de 400 filas, solo se mostrarán las primeras 400. Los modos más rápidos son dataMode='regions'
con ubicaciones especificadas como códigos ISO y dataMode='markers'
con entidades de latitud y longitud. El modo más lento es dataMode='markers'
con una dirección de string.
Importante: Tu DataTable
debe incluir todas las columnas opcionales que anteceden a las columnas que quieres usar. Por ejemplo, si quieres especificar una tabla de latitud y longitud, y solo deseas usar las columnas 1, 2 y 4, DataTable
aún debe definir la columna 3 (aunque no es necesario que agregues ningún valor):
dataTable = new google.visualization.DataTable(); dataTable.addRows(1); dataTable.addColumn('number', 'LATITUDE', 'Latitude'); dataTable.addColumn('number', 'LONGITUDE', 'Longitude'); dataTable.addColumn('number', 'VALUE', 'Value'); // Won't use this column, but still must define it. dataTable.addColumn('string', 'HOVER', 'HoverText'); dataTable.setValue(0,0,47.00); dataTable.setValue(0,1,-122.00); dataTable.setValue(0,3,"Hello World!");
Opciones de configuración
Nombre | Tipo | Predeterminado | Descripción |
---|---|---|---|
region |
string | "mundo" | El área que se mostrará en el mapa. (También se mostrarán las áreas circundantes). Puede ser un código de país (en formato ISO-3166 en mayúsculas) o una de las siguientes strings:
El mapa geográfico no habilita el comportamiento de desplazamiento o arrastre, y solo el comportamiento de zoom limitado. Se puede habilitar un alejamiento básico si se configura la propiedad |
dataMode |
string | 'regiones' | Cómo mostrar valores en el mapa Se admiten dos valores:
|
width |
string | "556px" | Ancho de la visualización. Si no se proporcionan unidades, la predeterminada es los píxeles. |
height |
string | "347px" | Altura de la visualización. Si no se proporcionan unidades, la predeterminada es los píxeles. |
colors |
Arreglo de números RGB con el formato 0xRRGGBB | [0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114] | Gradiente de color para asignar a los valores en la visualización. Debes tener al menos dos valores; el gradiente incluirá todos tus valores, más los valores intermedios calculados, el color más claro como el valor más pequeño y el color más oscuro como el más alto. |
showLegend |
boolean | true | Si es verdadero, muestra una leyenda para el mapa. |
showZoomOut |
boolean | falso | Si es verdadero, muestra un botón con la etiqueta que especifica la propiedad zoomOutLabel . Ten en cuenta que este botón no hace nada cuando se hace clic en él, excepto arrojar el evento zoomOut .
Para controlar el zoom, detecta este evento y cambia la opción region .
Solo puedes especificar showZoomOut si la opción region es más pequeña que la vista mundial. Una forma de habilitar el comportamiento de acercamiento es escuchar el evento regionClick , cambiar la propiedad region a la región adecuada y volver a cargar el mapa. |
zoomOutLabel |
string | Alejar | Etiqueta para el botón de zoom. |
Métodos
Método | Tipo de datos que se muestra | Descripción |
---|---|---|
draw(data, options) |
Ninguno | Dibuja el mapa. Se puede mostrar antes de que se complete el dibujo (consulta el evento drawingDone() ). |
getSelection() |
Arreglo de elementos de selección | Implementación estándar getSelection() Los elementos seleccionados son filas. Este método solo funciona cuando la opción dataMode es “regiones”. Solo puedes seleccionar una región con un valor asignado. |
setSelection(selection) |
Ninguno | Implementación estándar de setSelection() . Trata una selección como una selección de filas y admite varias selecciones de filas. Solo se pueden seleccionar las regiones con valores asignados. |
Eventos
Nombre | Descripción | Propiedades |
---|---|---|
error |
Se activa cuando se produce un error cuando se intenta procesar el gráfico. | id, mensaje |
select |
Se activa cuando el usuario hace clic en una región con un valor asignado. Para saber qué se seleccionó, llama a Nota: Debido a ciertas limitaciones, no se muestra el evento |
Ninguno |
regionClick |
Se llama cuando se hace clic en una región. Funciona para Nota: Debido a ciertas limitaciones, no se muestra el evento |
Un objeto con una sola propiedad, region , que es una string en formato ISO-3166 que describe la región en la que se hizo clic. |
zoomOut |
Se llama cuando se hace clic en el botón de alejamiento. Para procesar el zoom, detecta este evento y cambia la opción Nota: Debido a ciertas limitaciones, no se muestra el evento |
Ninguno |
drawingDone |
Se llama cuando el mapa geográfico termina de dibujarse. | Ninguno |
Política de Datos
Las ubicaciones codifican geográficamente Google Maps. Los datos que no requieren geocodificación no se envían a ningún servidor. Consulta las Condiciones del Servicio de Google Maps para obtener más información sobre sus políticas de datos.
Notas
Debido a la configuración de seguridad de Flash, es posible que esto (y todas las visualizaciones basadas en Flash) no funcione correctamente cuando se acceda a este desde una ubicación de archivo en el navegador (p.ej., file:///c:/webhost/myhost/myviz.html) en lugar de una URL de servidor web (p.ej., http://www.myhost.com/myviz.html). Este suele ser un problema de prueba. Puedes solucionar este problema como se describe en el sitio web de Macromedia.