Descripción general
En el mapa de Google Maps, se muestra un mapa con la API de Google Maps. Los valores de los datos se muestran como marcadores en el mapa. Los valores de datos pueden ser coordenadas (pares de latitud y longitud) o direcciones. Se escalará el mapa para que incluya todos los puntos identificados.
Si deseas que los mapas sean dibujos lineales en lugar de imágenes satelitales, usa un geográfico en su lugar.
Ubicaciones nombradas
Puedes identificar los lugares para colocar marcadores por nombre, como se muestra a continuación en este mapa de los diez países principales por población.
Cuando el usuario selecciona uno de los marcadores, se muestra una información sobre la herramienta con el nombre y la población del país, porque usamos la opción showInfoWindow. Además, cuando el usuario se desplace sobre uno de los marcadores durante un período breve, aparecerá una sugerencia de "título" con la misma información, ya que usamos la opción showTooltip.
Este es el código HTML completo:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {
'packages': ['map'],
// 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', 'Population'],
['China', 'China: 1,363,800,000'],
['India', 'India: 1,242,620,000'],
['US', 'US: 317,842,000'],
['Indonesia', 'Indonesia: 247,424,598'],
['Brazil', 'Brazil: 201,032,714'],
['Pakistan', 'Pakistan: 186,134,000'],
['Nigeria', 'Nigeria: 173,615,000'],
['Bangladesh', 'Bangladesh: 152,518,015'],
['Russia', 'Russia: 146,019,512'],
['Japan', 'Japan: 127,120,000']
]);
var options = {
showTooltip: true,
showInfoWindow: true
};
var map = new google.visualization.Map(document.getElementById('chart_div'));
map.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
Ubicaciones con codificación geográfica
También puedes especificar ubicaciones por latitud y longitud, lo que se carga más rápido que las ubicaciones nombradas:
En el gráfico anterior, se identifican cuatro ubicaciones por latitud y longitud.
var data = google.visualization.arrayToDataTable([
['Lat', 'Long', 'Name'],
[37.4232, -122.0853, 'Work'],
[37.4289, -122.1697, 'University'],
[37.6153, -122.3900, 'Airport'],
[37.4422, -122.1731, 'Shopping']
]);
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {
"packages":["map"],
// 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(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Lat', 'Long', 'Name'],
[37.4232, -122.0853, 'Work'],
[37.4289, -122.1697, 'University'],
[37.6153, -122.3900, 'Airport'],
[37.4422, -122.1731, 'Shopping']
]);
var map = new google.visualization.Map(document.getElementById('map_div'));
map.draw(data, {
showTooltip: true,
showInfoWindow: true
});
}
</script>
</head>
<body>
<div id="map_div" style="width: 400px; height: 300px"></div>
</body>
</html>
Personalizar marcadores
Puedes usar formas de marcadores ubicadas en otras partes de la Web. Este es un ejemplo con marcadores azules de iconarchive.com:
Si seleccionas los marcadores en el gráfico anterior, se inclinan. Se admiten archivos PNG, GIF y JPG.
var options = {
icons: {
default: {
normal: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',
selected: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'
}
}
};
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {
"packages":["map"],
// 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(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Lat', 'Long', 'Name'],
[37.4232, -122.0853, 'Work'],
[37.4289, -122.1697, 'University'],
[37.6153, -122.3900, 'Airport'],
[37.4422, -122.1731, 'Shopping']
]);
var options = {
icons: {
default: {
normal: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',
selected: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'
}
}
};
var map = new google.visualization.Map(document.getElementById('map_markers_div'));
map.draw(data, options);
}
</script>
</head>
<body>
<div id="map_markers_div" style="width: 400px; height: 300px"></div>
</body>
</html>
Cómo agregar varios conjuntos de marcadores
Además de crear un conjunto predeterminado de marcadores, también puedes crear varios conjuntos de marcadores.
Para crear un conjunto de marcadores adicional, agrega un ID a la opción icons y configura las imágenes. Luego, agrega una columna a tu tabla de datos y establece el ID del conjunto de marcadores que deseas usar en cada fila. También puedes usar 'default' o null para usar los marcadores predeterminados.
var url = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';
var options = {
zoomLevel: 6,
showTooltip: true,
showInfoWindow: true,
useMapTypeControl: true,
icons: {
blue: {
normal: url + 'Map-Marker-Ball-Azure-icon.png',
selected: url + 'Map-Marker-Ball-Right-Azure-icon.png'
},
green: {
normal: url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png',
selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png'
},
pink: {
normal: url + 'Map-Marker-Ball-Pink-icon.png',
selected: url + 'Map-Marker-Ball-Right-Pink-icon.png'
}
}
};
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['map'],
// 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 = new google.visualization.DataTable();
data.addColumn('string', 'Address');
data.addColumn('string', 'Location');
data.addColumn('string', 'Marker')
data.addRows([
['New York City NY, United States', 'New York', 'blue' ],
['Scranton PA, United States', 'Scranton', 'green'],
['Washington DC, United States', 'Washington', 'pink' ],
['Philadelphia PA, United States', 'Philly', 'green'],
['Pittsburgh PA, United States', 'Pittsburgh', 'green'],
['Buffalo NY, United States', 'Buffalo', 'blue' ],
['Baltimore MD, United States', 'Baltimore', 'pink' ],
['Albany NY, United States', 'Albany', 'blue' ],
['Allentown PA, United States', 'Allentown', 'green']
]);
var url = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';
var options = {
zoomLevel: 6,
showTooltip: true,
showInfoWindow: true,
useMapTypeControl: true,
icons: {
blue: {
normal: url + 'Map-Marker-Ball-Azure-icon.png',
selected: url + 'Map-Marker-Ball-Right-Azure-icon.png'
},
green: {
normal: url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png',
selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png'
},
pink: {
normal: url + 'Map-Marker-Ball-Pink-icon.png',
selected: url + 'Map-Marker-Ball-Right-Pink-icon.png'
}
}
};
var map = new google.visualization.Map(document.getElementById('map_div'));
map.draw(data, options);
}
</script>
</head>
<body>
<div id="map_div" style="height: 500px; width: 900px"></div>
</body>
</html>
Cómo aplicar estilos a Maps
La visualización del mapa incluye la capacidad de configurar estilos personalizados, lo que te permite crear uno o varios tipos de mapas personalizados.
Para definir un tipo de mapa personalizado, crea un objeto de estilo de mapa y colócalo debajo de su identificador (mapTypeId) en la opción de mapas. Por ejemplo:
var options = {
maps: {
<map style ID>: <map style object>
}
};
Más adelante, puedes hacer referencia a este tipo de mapa personalizado mediante el ID de estilo de mapa que le hayas asignado.
Tu objeto de estilo de mapa contiene un name, que será el nombre visible en el control de tipo de mapa (no tiene que coincidir con su mapTypeId), y un array styles, que contendrá objetos de estilo para cada elemento al que desees aplicar ajustes de estilo. La referencia de la API de Google Maps contiene una lista de los diferentes elementos, elementos y tipos de estilo con los que puedes crear un tipo de mapa personalizado.
Nota: Tu mapTypeId personalizado debe colocarse en la opción maps.
var options = {
mapType: 'styledMap',
zoomLevel: 12,
showTooltip: true,
showInfoWindow: true,
useMapTypeControl: true,
maps: {
// Your custom mapTypeId holding custom map styles.
styledMap: {
name: 'Styled Map', // This name will be displayed in the map type control.
styles: [
{featureType: 'poi.attraction',
stylers: [{color: '#fce8b2'}]
},
{featureType: 'road.highway',
stylers: [{hue: '#0277bd'}, {saturation: -50}]
},
{featureType: 'road.highway',
elementType: 'labels.icon',
stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]
},
{featureType: 'landscape',
stylers: [{hue: '#259b24'}, {saturation: 10}, {lightness: -22}]
}
]}}
};
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['map'],
// 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 = new google.visualization.DataTable();
data.addColumn('string', 'Address');
data.addColumn('string', 'Location');
data.addRows([
['Lake Buena Vista, FL 32830, United States', 'Walt Disney World'],
['6000 Universal Boulevard, Orlando, FL 32819, United States', 'Universal Studios'],
['7007 Sea World Drive, Orlando, FL 32821, United States', 'Seaworld Orlando' ]
]);
var options = {
mapType: 'styledMap',
zoomLevel: 12,
showTooltip: true,
showInfoWindow: true,
useMapTypeControl: true,
maps: {
// Your custom mapTypeId holding custom map styles.
styledMap: {
name: 'Styled Map', // This name will be displayed in the map type control.
styles: [
{featureType: 'poi.attraction',
stylers: [{color: '#fce8b2'}]
},
{featureType: 'road.highway',
stylers: [{hue: '#0277bd'}, {saturation: -50}]
},
{featureType: 'road.highway',
elementType: 'labels.icon',
stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]
},
{featureType: 'landscape',
stylers: [{hue: '#259b24'}, {saturation: 10}, {lightness: -22}]
}
]}}
};
var map = new google.visualization.Map(document.getElementById('map_div'));
map.draw(data, options);
}
</script>
</head>
<body>
<div id="map_div" style="height: 500px; width: 900px"></div>
</body>
</html>
Además de crear tipos de mapas personalizados, también puedes especificar los mapas que el usuario puede ver en el control de tipos de mapas con la opción mapTypeIds. De forma predeterminada, todos los tipos de mapas, incluidos los personalizados, aparecerán en el control correspondiente. La opción mapTypeIds acepta un array de strings de los tipos de mapas que deseas que el usuario vea. Estas strings deben hacer referencia a los nombres predefinidos de los estilos de mapa predeterminados (es decir, normal, satélite, relieve o híbrido) o al ID de estilo de mapa del tipo de mapa personalizado que definiste. Si configuras la opción mapTypeIds, tu mapa solo pondrá a disposición los tipos de mapas que especifiques en este array.
También puedes utilizarlo junto con la opción mapType a fin de establecer un estilo de mapa como predeterminado, pero no incluirlo en el array mapTypeIds. Esto hará que ese mapa solo se muestre en la carga inicial.
var options = {
mapType: 'styledMap',
zoomLevel: 7,
showTooltip: true,
showInfoWindow: true,
useMapTypeControl: true,
// User will only be able to view/select custom styled maps.
mapTypeIds: ['styledMap', 'redEverything', 'imBlue'],
maps: {
styledMap: {
name: 'Styled Map',
styles: [
{featureType: 'poi.attraction',
stylers: [{color: '#fce8b2'}]},
{featureType: 'road.highway',
stylers: [{hue: '#0277bd'}, {saturation: -50}]},
{featureType: 'road.highway', elementType: 'labels.icon',
stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]},
{featureType: 'landscape',
stylers: [{hue: '#259b24'}, {saturation: 10},{lightness: -22}]}
]},
redEverything: {
name: 'Redden All The Things',
styles: [
{featureType: 'landscape',
stylers: [{color: '#fde0dd'}]},
{featureType: 'road.highway',
stylers: [{color: '#67000d'}]},
{featureType: 'road.highway', elementType: 'labels',
stylers: [{visibility: 'off'}]},
{featureType: 'poi',
stylers: [{hue: '#ff0000'}, {saturation: 50}, {lightness: 0}]},
{featureType: 'water',
stylers: [{color: '#67000d'}]},
{featureType: 'transit.station.airport',
stylers: [{color: '#ff0000'}, {saturation: 50}, {lightness: -50}]}
]},
imBlue: {
name: 'All Your Blues are Belong to Us',
styles: [
{featureType: 'landscape',
stylers: [{color: '#c5cae9'}]},
{featureType: 'road.highway',
stylers: [{color: '#023858'}]},
{featureType: 'road.highway', elementType: 'labels',
stylers: [{visibility: 'off'}]},
{featureType: 'poi',
stylers: [{hue: '#0000ff'}, {saturation: 50}, {lightness: 0}]},
{featureType: 'water',
stylers: [{color: '#0288d1'}]},
{featureType: 'transit.station.airport',
stylers: [{color: '#0000ff'}, {saturation: 50}, {lightness: -50}]}
]}
}
};
Cargando
El nombre del paquete google.charts.load es "map".
Ten en cuenta que deberás obtener tu propio mapsApiKey para tu proyecto, en lugar de solo copiar el que se usa aquí, a fin de evitar que el servicio de datos del mapa quede en desuso para tus usuarios. Para obtener más información, consulta Configuración de carga.
google.charts.load("current", {
"packages":["map"],
// 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"
});
El nombre de clase de la visualización es google.visualization.Map.
Debido a que el nombre abreviado, Map, entra en conflicto con la clase Map de JavaScript, ChartWrapper no cargará este paquete automáticamente cuando especifiques chartType: 'Map'. Sin embargo, puedes especificar chartType: 'google.visualization.Map'.
var visualization = new google.visualization.Map(container);
Formato de los datos
Se admiten dos formatos de datos alternativos:
- Pares de latitud y longitud: Las primeras dos columnas deben ser números que designen la latitud y longitud, respectivamente. Una tercera columna opcional contiene una string que describe la ubicación especificada en las dos primeras columnas.
- Dirección de string: La primera columna debe ser una string que contenga una dirección. Esta dirección debe ser lo más completa posible. Una segunda columna opcional contiene una string que describe la ubicación de la primera columna. Las direcciones de string se cargan más lentamente, especialmente cuando tienes más de 10 direcciones.
Nota: La opción de latitud y longitud carga los mapas mucho más rápido, en especial con grandes datos. Te recomendamos usar esta opción para conjuntos de datos grandes. Visita API de Google Maps para obtener información sobre cómo transformar tus direcciones en puntos de latitud y longitud. El mapa puede mostrar un máximo de 400 entradas; si tus datos contienen más de 400 filas, solo se mostrarán las primeras 400.
Opciones de configuración
| Nombre | |
|---|---|
| enableScrollWheel |
Si la estableces como verdadera, se podrá acercar y alejar el mapa con la rueda de desplazamiento del mouse. Tipo: booleano
Valor predeterminado: falso
|
| íconos |
Contiene conjuntos de marcadores personalizados. Cada conjunto de marcadores puede especificar una imagen de marcador var options = {
icons: {
default: {
normal: '/path/to/marker/image',
selected: '/path/to/marker/image'
},
customMarker: {
normal: '/path/to/other/marker/image',
selected: '/path/to/other/marker/image'
}
}
};
Type:
Valor predeterminado: null
|
| Color de línea |
Si showLine es verdadero, define el color de la línea. Por ejemplo: “#800000”. Tipo: string
Predeterminado: color predeterminado
|
| Ancho de línea |
Si showLine es verdadero, define el ancho de la línea (en píxeles). Tipo: número
Valor predeterminado: 10
|
| maps.<mapTypeId> |
Un objeto que contiene propiedades de un tipo de mapa personalizado. Se accederá a este tipo de mapa personalizado mediante el
Type:
Valor predeterminado: null
|
| maps.<mapTypeId>.nombre |
El nombre del mapa que se mostrará en el control de mapa si Tipo: string
Valor predeterminado: null
|
| maps.<mapTypeId>.styles |
Contiene los objetos de estilo para los distintos elementos de un tipo de mapa personalizado.
Cada objeto de estilo puede contener de 1 a 3 propiedades: {
featureType: 'roadway.highway',
elementType: 'labels.text.fill',
stylers: [{hue: '#ff0000}, {saturation: 50}, {lightness: 100}]
}
Consulta la documentación de Maps para obtener más información sobre los diferentes elementos, elementos y parámetros de estilo. Tipo: array
Valor predeterminado: null
|
| Tipo de mapa |
El tipo de mapa que se mostrará. Los valores posibles son “normal”, “relieve”, “satélite”, “híbrido” o el ID de un tipo de mapa personalizado, si se creó alguno. Tipo: string
Predeterminado: "híbrido"
|
| ID de tipos de mapas |
Si usas el control de tipo de mapa ( Tipo: array
Valor predeterminado: null
|
| showInfoWindow. |
Si se configura como verdadera, se muestra la descripción de la ubicación en una ventana separada cuando el usuario selecciona un marcador de punto. Esta opción solía llamarse Tipo: booleano
Valor predeterminado: falso
|
| Mostrar línea |
Si se configura como verdadera, se muestra una polilínea de Google Maps en todos los puntos. Tipo: booleano
Valor predeterminado: falso
|
| información sobre herramientas |
Si se configura como verdadera, se muestra la descripción de la ubicación como información sobre la herramienta cuando el mouse está colocado sobre un marcador de punto. Esta opción solía llamarse Tipo: booleano
Valor predeterminado: falso
|
| useMapTypeControl |
Muestra un selector de tipo de mapa que permita al usuario alternar entre [mapa, satélite, híbrido, terreno]. Cuando useMapTypeControl se establece en False (configuración predeterminada), no se presenta ningún selector y la opción mapType determina el tipo. Tipo: booleano
Valor predeterminado: falso
|
| Nivel de zoom |
Un número entero que indica el nivel de zoom inicial del mapa, en el que 0 se aleja por completo (todo el mundo) y 19 es el nivel de zoom máximo. (Consulta "Niveles de zoom" en la API de Google Maps). Tipo: número
Predeterminado: automático
|
Métodos
| Método | |
|---|---|
draw(data, options) |
Dibuja el mapa. Tipo de datos que se muestra: ninguno
|
getSelection() |
Implementación Tipo de datos que se muestra: arreglo de elementos de selección
|
setSelection(selection) |
Implementación Tipo de datos que se muestra: ninguno
|
Eventos
| Nombre | |
|---|---|
error |
Se activa cuando se produce un error cuando se intenta procesar el gráfico. Propiedades: ID, mensaje
|
select |
Evento de selección estándar Propiedades: Ninguna
|
Política de Datos
Google Maps muestra el mapa. Consulta las Condiciones del Servicio de Google Maps para obtener más información sobre la política de datos.