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

Visualización: mapa geográfico

Overview
Ejemplos
Cargando
Formato de los datos
Opciones de configuración
Métodos
Eventos
Política de Datos
Notes

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 colores y puedes especificar texto flotante opcional para las regiones. El mapa se renderiza en el navegador mediante un reproductor Flash incorporado. Ten en cuenta que el mapa no es arrastrable ni desplazable, pero se puede configurar 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 la pantalla de los marcadores.

Ejemplo de regiones

El estilo de región rellena regiones completas (por lo general, países) con colores correspondientes a los valores que asignas. Asigna options['dataMode'] = 'regions' en tu código para especificar el estilo de las regiones.

<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 con un tamaño y un color que indica un valor sobre 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 de mapa geográfico es google.visualization.GeoMap.

  var visualization = new google.visualization.GeoMap(container);

Formato de datos

Se admiten dos formatos de dirección, cada uno de los cuales admite una cantidad diferente de columnas y diferentes tipos de datos para cada columna. Todas las direcciones de la tabla deben usar una o la otra; no puedes combinar tipos.

Formato 1: Ubicaciones de latitud y longitud Este formato solo funciona cuando la opción dataMode es "markers". Si se utiliza este formato, no es necesario que incluyas JavaScript de Google Maps. La ubicación se ingresa en dos columnas, más dos columnas opcionales:
1. [Number, Required] Es una latitud. Los números positivos son el norte y los negativos, el sur.
2. [Number, Required] Es una longitud. Los números positivos son el este y los negativos, el oeste.
3. [Número, opcional] Es un valor numérico que se muestra cuando el usuario coloca el cursor sobre esta región. Si se usa la columna 4, esta es obligatoria.
4. [String, Optional] Es un texto de cadena adicional que se muestra cuando el usuario coloca el cursor sobre esta región.
Formato 2: dirección, nombre del país, ubicaciones del nombre de la región 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, Required] Una ubicación del mapa. Se aceptan los siguientes formatos:
  - Una dirección específica (por ejemplo, "Av. Pensilvania 1600").
  - Un nombre de país como una cadena (por ejemplo, “Inglaterra”), un código ISO-3166 en mayúsculas o su equivalente de texto en inglés (por ejemplo, “GB” o “Reino Unido”).
  - Un nombre de código de región ISO-3166-2 en mayúsculas o su equivalente de 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 usan para designar varias regiones. Solo se admiten los códigos de EE.UU. Ten en cuenta que no son lo mismo que los códigos de área telefónicos.
2. [Número, opcional] Es un valor numérico que se muestra cuando el usuario coloca el cursor sobre esta región. Si se usa la columna 3, esta es obligatoria.
3. [String, Optional] Es un texto de cadena adicional que se muestra cuando el usuario coloca el cursor sobre esta región.

Nota: Un mapa puede mostrar un máximo de 400 entradas. Si tu DataTable o DataView contiene 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 cadena.

Importante: Tu DataTable debe incluir todas las columnas opcionales que anteceden a las columnas que desees usar. Por ejemplo, si deseas especificar una tabla de latitud y longitud, y solo quieres usar las columnas 1, 2 y 4, tu DataTable debe definir la columna 3 (aunque no necesitas agregarle valores):

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`	cadena	"world"	El área que se mostrará en el mapa. (También se mostrarán las áreas cercanas). Puede ser un código de país (en formato ISO-3166 en mayúsculas) o una de las siguientes cadenas: `world` - (Todo el mundo) `us_metro`: (Estados Unidos, áreas metropolitanas) `005` (Sudamérica) `013` (América Central) `021` (Norteamérica) `002`: (Toda África) `017`: (África Central) `015`: (África del Norte) `018` (Sudáfrica) `030` (Asia Oriental) `034` (Sur de Asia) `035` (región de Asia-Pacífico) `009` (Oceanía) `145` (Oriente Medio) `143`: (Asia Central) `151`: (Norte de Asia) `154` (Norte de Europa) `155` (Europa Occidental) `039` (Sur de Europa) El mapa geográfico no habilita el comportamiento de desplazamiento ni arrastre, y solo habilita el comportamiento de zoom limitado. Si quieres habilitar el alejamiento básico, configura la propiedad `showZoomOut`.
`dataMode`	cadena	'regiones' [regiones]	Cómo mostrar valores en el mapa Se admiten dos valores: `regions`: Aplica el color adecuado a toda una región. Esta opción no se puede utilizar con direcciones de latitud y longitud. Consulta Ejemplo de regiones. `markers`: Muestra un punto sobre una región, donde el color y el tamaño indican el valor. Consulta Ejemplo de marcadores.
`width`	cadena	"556 px"	Ancho de la visualización. Si no se proporcionan unidades, la unidad predeterminada es los píxeles.
`height`	cadena	"347 px"	Altura de la visualización. Si no se proporcionan unidades, la unidad predeterminada es los píxeles.
`colors`	Array de números RGB en el formato 0xRRGGBB	[0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114].	Es el 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, con el color más claro como el valor más pequeño y el color más oscuro como el valor más alto.
`showLegend`	boolean	verdadero	Si es verdadero, muestra una leyenda para el mapa.
`showZoomOut`	boolean	false	Si es verdadero, muestra un botón con la etiqueta especificada por la propiedad `zoomOutLabel`. Ten en cuenta que este botón no hace nada cuando se hace clic en él, excepto lanzar el evento `zoomOut`. Para controlar el zoom, captura 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 del mundo. Una forma de habilitar el comportamiento de acercamiento sería escuchar el evento `regionClick`, cambiar la propiedad `region` a la región adecuada y volver a cargar el mapa.
`zoomOutLabel`	cadena	"Aléjate"	Etiqueta del 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()`	Array de elementos de selección	Implementación estándar de `getSelection()` Los elementos seleccionados son filas. Este método solo funciona cuando la opción `dataMode` es “regions”. 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 fila y admite selecciones de varias 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 renderizar 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 como “regions”. Nota: Debido a ciertas limitaciones, no se produce el evento `select` si accedes a la página en el navegador como un archivo (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 tanto con "regiones" como con "marcadores" `dataMode`. Sin embargo, en el modo de marcador, no se arrojará para el país específico asignado en la opción "región" (si se incluyó un país específico). Nota: Debido a ciertas limitaciones, no se arroja el evento `regionClick` si accedes a la página en el navegador como un archivo (p.ej., "file://") en lugar de hacerlo desde un servidor (p.ej., "http://www").	Un objeto con una sola propiedad, `region`, es una cadena 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 controlar el zoom, captura este evento y cambia la opción `region`. Nota: Debido a ciertas limitaciones, no se produce el evento `zoomOut` si accedes a la página en el navegador como un archivo (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

Google Maps geocodifica las ubicaciones. Los datos que no requieran 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 su política de datos.

Notas

Debido a la configuración de seguridad de Flash, es posible que esta (y todas las visualizaciones basadas en Flash) no funcione correctamente cuando se acceda a ella desde la ubicación de un archivo en el navegador (por ejemplo, file:///c:/webhost/myhost/myviz.html) en lugar de una URL de servidor web (por ejemplo, http://www.myhost.com/myviz.html). Por lo general, este es solo un problema de prueba. Puedes solucionar este problema como se describe en el sitio web de Macromedia.