Visão geral
O gráfico de mapa do Google exibe um mapa usando a API Google Maps. Os valores de dados são exibidos como marcadores no mapa. Os valores de dados podem ser coordenadas (pares longos) ou endereços. O mapa será dimensionado para incluir todos os pontos identificados.
Se você quiser que seus mapas sejam desenhos de linha em vez de imagens de satélite, use um geográfico.
Locais nomeados
É possível identificar os lugares onde colocar marcadores por nome, conforme mostrado no mapa com os 10 principais países por população.
Quando o usuário seleciona um dos marcadores, uma dica com o nome e a população do país é exibida, porque usamos a opção showInfoWindow. Além disso, quando o usuário passa o cursor sobre um dos marcadores por um curto período, uma dica de "título" é exibida com as mesmas informações, porque usamos a opção showTooltip.
Veja o 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>
Locais geocodificados
Também é possível especificar locais por latitude e longitude, que carregam mais rapidamente do que os locais nomeados:
O gráfico acima identifica quatro locais por latitude e longitude.
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>
Como personalizar marcadores
Você pode usar formas de marcadores localizadas em outros lugares da Web. Veja um exemplo com os alfinetes azuis em iconArchive.com:
Se você selecionar os alfinetes no gráfico acima, eles terão um valor menor. PNGs, GIFs e JPGs são compatíveis.
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>
Adicionar vários conjuntos de marcadores
Além de criar um conjunto padrão de marcadores, você também pode criar vários conjuntos de marcadores.
Para criar um conjunto de marcadores adicionais, adicione um código à opção icons e defina suas imagens de marcador. Em seguida, adicione uma coluna à sua tabela de dados e defina o código do conjunto de marcadores que você quer usar para cada linha na tabela de dados. Também é possível usar 'default' ou null para usar os marcadores padrão.
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>
Estilizar mapas
A visualização de mapa oferece a possibilidade de definir estilos personalizados, permitindo que você crie um ou vários tipos de mapa.
Você pode definir um tipo de mapa personalizado criando um objeto de estilo de mapa e colocando-o sob o respectivo identificador (mapTypeId) na opção de mapas. Exemplo:
var options = {
maps: {
<map style ID>: <map style object>
}
};
Você pode consultar esse tipo de mapa personalizado mais tarde pelo ID de estilo do mapa que você atribuiu a ele.
Seu objeto de estilo de mapa contém um name, que será o nome de exibição no controle do tipo de mapa (não precisa corresponder ao mapTypeId) e uma matriz styles, que conterá objetos de estilo para cada elemento que você quiser personalizar. A referência da API Google Maps tem uma lista dos diferentes elementos, elementos e tipos de estilo com que você pode criar um tipo de mapa personalizado.
Observação:o mapTypeId personalizado precisa ser colocado na opção 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>
Além de criar tipos de mapa personalizados, você também pode especificar quais mapas o usuário pode ver no controle com a opção mapTypeIds. Por padrão, todos os tipos de mapa, incluindo os personalizados, serão exibidos no controle de tipos de mapa. A opção mapTypeIds aceita uma matriz de strings dos tipos de mapa que você quer permitir que o usuário veja. Essas strings precisam se referir aos nomes predefinidos para os estilos de mapa padrão (por exemplo, normal, satélite, terreno ou híbrido) ou ao ID do estilo de mapa de um tipo de mapa personalizado que você definiu. Ao definir a opção mapTypeIds, seu mapa disponibilizará apenas os tipos de mapa especificados nessa matriz.
Também é possível usar esses elementos com a opção mapType para definir um estilo de mapa como padrão, mas não incluí-lo na matriz mapTypeIds. Isso fará com que esse mapa seja exibido somente no carregamento 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}]}
]}
}
};
Carregando
O nome do pacote google.charts.load é "map".
Você precisará ter seu próprio mapsApiKey para o projeto, em vez de apenas copiar o que é usado nos exemplos aqui. Isso evita a degradação do serviço de dados do mapa para seus usuários. Para ver mais detalhes, consulte
Configurações de carregamento.
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"
});
O nome da classe do layout é google.visualization.Map.
Como o nome abreviado Map está em conflito com a classe Map do JavaScript, o ChartWrapper não carregará automaticamente esse pacote quando você especificar chartType: 'Map'. No entanto, você pode especificar
chartType: 'google.visualization.Map'.
var visualization = new google.visualization.Map(container);
Formato de dados
Há suporte para dois formatos de dados alternativos:
- Pares de latitude/longitude: as duas primeiras colunas precisam ser números designando a latitude e a longitude, respectivamente. Uma terceira coluna opcional contém uma string que descreve o local especificado nas duas primeiras colunas.
- Endereço da string: a primeira coluna precisa ser uma string que contenha um endereço. Esse endereço deve ser o mais completo possível. Uma segunda coluna opcional contém uma string que descreve o local na primeira coluna. Os endereços de string são carregados mais lentamente, principalmente quando há mais de 10 endereços.
Observação: a opção de pares de latitude/longitude carrega mapas muito mais rapidamente, especialmente com dados grandes. Recomendamos que você use essa opção para grandes conjuntos de dados. Acesse a API Google Maps para saber como transformar seus endereços em pontos de latitude e longitude. O mapa pode exibir no máximo 400 entradas. Se os dados tiverem mais de 400 linhas, apenas as primeiras 400 serão exibidas.
Opções de configuração
| Nome | |
|---|---|
| enableScrollWheel |
Se definida como verdadeira, ativa o aumento e diminuição do zoom usando a roda de rolagem do mouse. Tipo: booleano
Padrão:falso
|
| ícones |
Mantém conjuntos de marcadores personalizados. Cada conjunto de marcadores pode especificar uma imagem 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'
}
}
};
Tipo: objeto
Padrão: nulo
|
| Cor da linha |
Se showLine for verdadeiro, define a cor da linha. Por exemplo: "#800000". Tipo: string
Padrão: cor padrão
|
| Largura da linha |
Se showLine for verdadeiro, definirá a largura da linha (em pixels). Tipo: número
Padrão: 10
|
| maps.<mapTypeId> |
Um objeto que contém propriedades de um tipo de mapa personalizado. Esse tipo de mapa personalizado será acessado pelo
Tipo: objeto
Padrão:nulo
|
| maps.<mapTypeId>.name |
O nome do mapa que será exibido no controle do mapa se Tipo: string
Padrão:nulo
|
| maps.<mapTypeId>.styles |
Mantém os objetos de estilo para os vários elementos de um tipo de mapa personalizado.
Cada objeto de estilo pode conter de uma a três propriedades: {
featureType: 'roadway.highway',
elementType: 'labels.text.fill',
stylers: [{hue: '#ff0000}, {saturation: 50}, {lightness: 100}]
}
Consulte a documentação do Maps para mais informações sobre os diferentes elementos, elementos e estilizadores. Tipo: matriz
Padrão: nulo
|
| mapType |
O tipo de mapa a ser exibido. Os valores possíveis são "normal", "terreno", "satélite", "híbrido" ou o ID de um tipo de mapa personalizado, se houver. Tipo: string
Padrão: "híbrido"
|
| Ids do tipo de mapa |
Se você estiver usando o controle do tipo de mapa ( Tipo: matriz
Padrão:nulo
|
| Mostrar janela de informações |
Se definido como verdadeiro, mostra a descrição do local em uma janela separada quando um marcador de ponto é selecionado pelo usuário. Essa opção era chamada de Tipo: booleano
Padrão:falso
|
| Linha de exibição |
Se definido como verdadeiro, mostrará uma polilinha do Google Maps por todos os pontos. Tipo: booleano
Padrão:falso
|
| Dica de ferramenta |
Se definido como verdadeiro, mostra a descrição do local como uma dica quando o mouse está posicionado acima de um marcador de ponto. Essa opção era chamada de Tipo: booleano
Padrão:falso
|
| Uso de ControlControl |
Mostrar um seletor de tipo de mapa que permite ao visualizador alternar entre [mapa, satélite, híbrido, terreno]. Quando useJumpControl for false (padrão), nenhum seletor será apresentado e o tipo será determinado pela opção mapType. Tipo: booleano
Padrão:falso
|
| zoomLevel |
Um número inteiro que indica o nível de zoom inicial do mapa, em que 0 é completamente diminuído (todo o mundo) e 19 é o nível de zoom máximo. Consulte "Níveis de zoom" na API Google Maps. Tipo:número
Padrão: automático
|
Métodos
| Método | |
|---|---|
draw(data, options) |
Desenha o mapa. Tipo de retorno:nenhum
|
getSelection() |
Implementação padrão de
Tipo de retorno: matriz de elementos de seleção
|
setSelection(selection) |
Implementação padrão de
Tipo de retorno: nenhum
|
Eventos
| Nome | |
|---|---|
error |
Disparado quando ocorre um erro ao tentar renderizar o gráfico. Propriedades:ID e mensagem
|
select |
Evento de seleção padrão Propriedades:nenhuma
|
Política de dados
O mapa é exibido pelo Google Maps. Consulte os Termos de Serviço do Google Maps para saber mais sobre a política de dados.