Se usó la API de Cloud Translation para traducir esta página.

Visualización: Geomapa

Descripción general
Ejemplos
Cargando
Formato de datos
Opciones de configuración
Métodos
Eventos
Política de Datos
Notas

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:
1. [Number, required] Una latitud. Los números positivos son el norte, los números negativos son el sur.
2. [Number, Required] Longitud. Los números positivos son el este y los negativos, el oeste.
3. [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.
4. [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:
1. [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.
2. [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.
3. [String, opcional] Texto de string adicional que se muestra cuando el usuario se desplaza sobre esta región.

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: `world` - (Todo el mundo) `us_metro` - (Estados Unidos, áreas metropolitanas) `005` - (América del Sur) `013` - (Centroamérica) `021` - (Norteamérica) `002` - (toda África) `017` - (África Central) `015` - (África del norte) `018` - (Sudáfrica) `030` - (Asia oriental) `034` - (Sur de Asia) `035` - (Asia/Pacífico) `009` - (Oceanía) `145` - (Oriente Medio) `143` - (Asia Central) `151` - (Norte de Asia) `154` - (Europa del Norte) `155` - (Europa occidental) `039` - (Europa del Sur) 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 `showZoomOut`.
`dataMode`	string	'regiones'	Cómo mostrar valores en el mapa Se admiten dos valores: `regions`: Colorea toda una región con el color adecuado. Esta opción no se puede utilizar con direcciones de latitud y longitud. Consulta el ejemplo de regiones. `markers`: Muestra un punto sobre una región, en el que el color y el tamaño indican el valor. Consulta el Ejemplo de marcadores.
`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 `getSelection()`. Solo está disponible cuando la opción `dataMode` está configurada en “regiones”. Nota: Debido a ciertas limitaciones, no se muestra el evento `select` si accedes a la página como un archivo en tu navegador (p.ej., "file://") en lugar de hacerlo desde un servidor (p.ej., “http://www”).	Ninguno
`regionClick`	Se llama cuando se hace clic en una región. Funciona para `dataMode` 'regiones' y 'marcadores'. Sin embargo, en el modo de marcador, esto no se arrojará para el país específico asignado en la opción de región (si se incluyó en un país específico). Nota: Debido a ciertas limitaciones, no se muestra el evento `regionClick` si accedes a la página como un archivo en tu navegador (p.ej., "file://") en lugar de hacerlo desde un servidor (p.ej., “http://www”).	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 `region`. Nota: Debido a ciertas limitaciones, no se muestra el evento `zoomOut` si accedes a la página como un archivo en tu navegador (p.ej., "file://") en lugar de hacerlo desde un servidor (p.ej., “http://www”).	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.