Pronto!

Para começar a desenvolver, acesse nossa documentação do desenvolvedor.

Ativar a Google Maps JavaScript API

Para começar, orientaremos você pelo Console do Desenvolvedor do Google para realizar algumas atividades:

  1. Criar ou selecionar um projeto
  2. Ativar a Google Maps JavaScript API e serviços relacionados
  3. Criar chaves apropriadas
Continuar

Camada de mapa de calor

  1. Visão geral
  2. Carregar a biblioteca de visualização
  3. Adicionar pontos de dados ponderados
  4. Personalizar uma camada de mapa de calor

A camada de mapa de calor renderiza mapas de calor no lado do cliente.

Visão geral

Uma camada mapa de calor é uma visualização que demonstra a intensidade dos dados em pontos geográficos. Quando a camada de mapa de calor é ativada, uma sobreposição colorida é exibida sobre o mapa. Por padrão, as áreas de maior intensidade são coloridas em vermelho e as de menor intensidade em verde.

A Google Maps JavaScript API renderiza dados de mapa de calor no lado do cliente, usando a camada de mapa de calor, ou no lado do servidor, usando uma Fusion Table. Veja a seguir algumas principais diferenças entre os dois métodos:

Camada de mapa de calor Camada Fusion Table
Um grande número de pontos de dados pode reduzir o desempenho. Pontos de dados adicionais têm pouco impacto no desempenho.
É possível personalizar a aparência do mapa de calor alterando opções como o gradiente de cores, o raio dos pontos de dados e a intensidade de cada ponto de dados. Não é possível personalizar a aparência do mapa de calor.
É possível controlar se os dados do mapa de calor dissipam ou não em níveis mais altos de zoom. Todos os dados do mapa de calor são dissipados à medida que o zoom aumenta.
Os dados podem ser armazenados em HTML, em um servidor ou calculados em tempo real. Os dados podem ser alterados em tempo de execução. Todos os dados precisam ser armazenados em uma Fusion Table. É difícil alterar os dados em tempo de execução.

Carregar a biblioteca de visualização

A camada de mapa de calor faz parte da biblioteca google.maps.visualization e não é carregada por padrão. As classes de Visualization são uma biblioteca independente, separada do código principal da Google Maps JavaScript API. Para usar a funcionalidade contida nessa biblioteca, você precisa primeiro carregá-la usando o parâmetro libraries no URL de bootstrap da Maps JavaScript API:

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">
</script>

Adicionar uma camada de mapa de calor

Para adicionar uma camada de mapa de calor, crie antes um novo objeto HeatmapLayer e passe alguns dados geográficos na forma de uma matriz ou um objeto MVCArray[]. Os dados podem ser um objeto LatLng ou um objeto WeightedLocation. Depois de instanciar o objeto HeatmapLayer, adicione-o ao mapa chamando o método setMap().

O exemplo a seguir adiciona 14 pontos de dados a um mapa de São Francisco.

/* Data points defined as an array of LatLng objects */
var heatmapData = [
  new google.maps.LatLng(37.782, -122.447),
  new google.maps.LatLng(37.782, -122.445),
  new google.maps.LatLng(37.782, -122.443),
  new google.maps.LatLng(37.782, -122.441),
  new google.maps.LatLng(37.782, -122.439),
  new google.maps.LatLng(37.782, -122.437),
  new google.maps.LatLng(37.782, -122.435),
  new google.maps.LatLng(37.785, -122.447),
  new google.maps.LatLng(37.785, -122.445),
  new google.maps.LatLng(37.785, -122.443),
  new google.maps.LatLng(37.785, -122.441),
  new google.maps.LatLng(37.785, -122.439),
  new google.maps.LatLng(37.785, -122.437),
  new google.maps.LatLng(37.785, -122.435)
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData
});
heatmap.setMap(map);

Adicionar pontos de dados ponderados

Um mapa de calor renderiza objetos LatLng, WeightedLocation ou uma combinação dos dois. Os dois objetos representam um único ponto de dados em um mapa, mas um objeto WeightedLocation permite especificar uma ponderação para o ponto de dados. Aplique uma ponderação a um ponto de dados para que WeightedLocation seja renderizado com uma intensidade maior que um simples objeto LatLng. A ponderação é uma escala linear, onde cada objeto LatLng tem uma ponderação implícita de 1. A adição de uma única WeightedLocation de {location: new google.maps.LatLng(37.782, -122.441), weight: 3} tem o mesmo efeito que adicionar google.maps.LatLng(37.782, -122.441) três vezes. Objetos weightedLocation e LatLng podem ser combinados em uma única matriz.

Usar o objeto WeightedLocation em vez de LatLng pode ser útil para:

  • Adicionar grandes quantidades de dados em uma única localização. Renderizar um único objeto WeightedLocation com uma ponderação de 1000 é mais rápido que renderizar 1000 objetos LatLng.
  • Enfatizar dados com base em valores arbitrários. Por exemplo, use objetos LatLng para plotar dados de terremotos, mas use WeightedLocation para medir a magnitude de cada terremoto na escala Richter.
/* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [
  {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
  new google.maps.LatLng(37.782, -122.445),
  {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
  {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
  {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
  new google.maps.LatLng(37.782, -122.437),
  {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},

  {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
  {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
  new google.maps.LatLng(37.785, -122.443),
  {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
  new google.maps.LatLng(37.785, -122.439),
  {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
  {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatMapData
});
heatmap.setMap(map);

Personalizar uma camada de mapa de calor

É possível personalizar a renderização do mapa de calor com as opções abaixo. Consulte a documentação de HeatmapLayerOptions para obter mais informações.

  • dissipating: especifica se mapas de calor dissipam com o zoom. Se false, o raio de influência aumenta com o nível de zoom para garantir que a intensidade de cor seja preservada em todas as localizações geográficas. O padrão é false.
  • gradient: o gradiente de cor do mapa de calor, especificado como uma matriz de strings de cores CSS. Todas as cores CSS3, incluindo RGBA, são permitidas, exceto cores nomeadas estendidas e valores HSL(A).
  • maxIntensity: a intensidade máxima do mapa de calor. Por padrão, as cores do mapa de calor são dimensionadas dinamicamente de acordo com a maior concentração de pontos em qualquer pixel específico do mapa. Essa propriedade também permite especificar um máximo fixo. Pode ser útil definir a intensidade máxima quando o conjunto de dados contém algumas exceções com uma intensidade excepcionalmente alta.
  • radius: o raio da influência de cada ponto de dados, em pixels.
  • opacity: a opacidade do mapa de calor, expressa como um número entre 0 e 1.

O exemplo abaixo mostra algumas opções de personalização disponíveis.

Ver o exemplo da camada de mapa de calor

Enviar comentários sobre…

Google Maps JavaScript API
Google Maps JavaScript API
Precisa de ajuda? Acesse nossa página de suporte.