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 Fusion Tables (Experimental)

  1. Visão geral
  2. Limites
  3. Configuração da Fusion Table
  4. Construção de uma camada de FusionTables
  5. Consultas de Fusion Table
  6. Estilos de Fusion Table
  7. Mapas de calor de Fusion Table

Observação: a camada de Fusion Tables é experimental.

A camada de Fusion Tables renderiza dados contidos em Google Fusion Tables.

Visão geral

A Google Maps JavaScript API permite renderizar dados contidos em Google Fusion Tables como uma camada de um mapa usando o objeto FusionTablesLayer. A Google Fusion Table é uma tabela de banco de dados em que cada linha contém dados sobre um determinado recurso. Para dados geográficos, cada linha da Google Fusion Table contém também dados de localização, mantendo informações de posição do recurso. A FusionTablesLayer oferece uma interface para Fusion Tables e permite a renderização automática dos dados de localização, oferecendo sobreposições clicáveis que exibem os dados adicionais de um recurso.

Veja a seguir um exemplo de Fusion Table mostrando dados geográficos:

Limites

Use a Google Maps JavaScript API para adicionar até cinco camadas de Fusion Tables a um mapa. É possível aplicar até cinco regras de estilo a uma dessas camadas.

Além disso:

  • Apenas as 100.000 primeiras linhas de dados são mapeadas ou incluídas nos resultados da consulta.
  • As consultas com predicados espaciais somente retornam dados contidos nessas 100.000 primeiras linhas. Portanto, se você aplica um filtro a uma tabela muito grande e o filtro abrange dados em linhas após as 100.000 primeiras, essas linhas não são exibidas.
  • Na importação ou inserção de dados, lembre-se de que:
    • O tamanho total de dados enviados em uma única chamada de API não pode exceder 1 MB.
    • Uma célula de dados em Fusion Tables comporta no máximo um milhão de caracteres. Ocasionalmente, pode ser necessário reduzir a precisão das coordenadas ou simplificar as descrições de polígonos ou linhas.
    • O número máximo de vértices comportado por uma tabela é cinco milhões.
  • Examinando o mapa, você pode notar:
    • São mostrados os dez componentes com maior área em uma multigeometria.
    • Quando o zoom é muito afastado, tabelas com mais de 500 recursos mostram pontos (em vez de linhas ou polígonos).

Configuração da Fusion Table

Fusion Tables são tabelas de dados que oferecem suporte incorporado a dados geográficos. Obtenha mais informações em Sobre o Fusion Tables. Para que uma camada de Fusion Tables exiba dados na API em um mapa do Google Maps, a tabela deve atender aos seguintes critérios:

  • A tabela precisa ser compartilhada como Public ou Unlisted.
  • A tabela precisa ter uma ou mais colunas expostas como Location. Na interface web das Fusion Tables, selecione Edit > Modify Columns e selecione as colunas desejadas.

A coluna Location precisa cumprir os requisitos de formatação mostrados abaixo.

  • Coordenadas de latitude/longitude podem ser inseridas em uma única coluna, separadas por vírgula (latitude,longitude) ou divididas em duas colunas (uma para latitude, outra para longitude). Consulte a documentação de Fusion Tables para obter mais informações.
  • Endereços devem ser primeiro geocodificados. Na interface web das Fusion Tables, selecione File > Geocode.
  • Dados geométricos de KML como pontos, linhas e polígonos são permitidos.

Construção de uma camada de FusionTables

O construtor FusionTablesLayer cria uma camada a partir de uma tabela Fusion pública usando o ID criptografado da tabela, que pode ser obtido selecionando File > About na IU das Fusion Tables.

Para adicionar uma camada de Fusion Tables ao mapa, crie a camada passando um objeto query com:

  • Uma propriedade select, cujo valor é o nome da coluna que contém as informações de localização. Nomes de coluna que contêm espaços, palavras reservadas ou que não começam por uma letra precisam estar entre aspas.
  • Uma propriedade from cujo valor é um dos IDs criptografados.

Em seguida, defina o map da camada como seu objeto Map, da mesma forma que qualquer outra sobreposição.

Observação: Versões mais antigas da Google Maps JavaScript API faziam referência a uma Fusion Table pelo ID numérico. Enquanto este método continua a funcionar, o ID criptografado é preferencial.

Veja a seguir um exemplo mostrando homicídios em Chicago em 2009 usando uma Fusion Table pública:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.850033, lng: -87.6500523},
    zoom: 11
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: '\'Geocodable address\'',
      from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
    }
  });
  layer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.850033, lng: -87.6500523},
    zoom: 11
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: '\'Geocodable address\'',
      from: '1mZ53Z70NsChnBMm-qEYmSDOvLXgrreLTkQUvvg'
    }
  });
  layer.setMap(map);
}

Ver exemplo de Fusion Table

Consultas de Fusion Table

As Fusion Tables também permitem aplicar consultas avançadas, que podem restringir um conjunto de resultados de acordo com critérios especificados. As consultas são especificadas usando um parâmetro query de FusionTablesLayerOptions:

query: {
  select: locationColumn,
  from: fusionTableID,
  where: constraintClause
}

onde locationColumn é uma coluna geocodificada existente do tipo Location. Nomes de coluna no select que contêm espaços ou campos field que contêm espaços, palavras reservadas ou que não começam por uma letra precisam estar entre aspas.

Os operadores de pesquisa permitidos estão listados na documentação das Fusion Tables.

O exemplo a seguir exibe localizações ao longo da Red Line da CTA com frequência em dias de semana acima de 5.000:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.948766, lng: -87.691497},
    zoom: 12
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'address',
      from: '1d7qpn60tAvG4LEg4jvClZbc1ggp8fIGGvpMGzA',
      where: 'ridership > 5000'
    }
  });
  layer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 41.948766, lng: -87.691497},
    zoom: 12
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'address',
      from: '1d7qpn60tAvG4LEg4jvClZbc1ggp8fIGGvpMGzA',
      where: 'ridership > 5000'
    }
  });
  layer.setMap(map);
}

Ver exemplo de Fusion Table

Estilos de Fusion Table

O construtor de camada de Fusion Tables também aceita um parâmetro styles de FusionTablesLayerOptions para aplicar cor, largura de traço e opacidade a linhas e polígonos. Também é possível especificar ícones de marcador usando os nomes de ícones ou marcadores de mapa permitidos.

Observação: somente é possível aplicar estilos a uma única camada de Fusion Tables por mapa. Até cinco estilos podem ser aplicados a essa camada.

O parâmetro styles usa a seguinte sintaxe:

styles: [{
  where: 'column_name condition',
  markerOptions: {
    iconName: "supported_icon_name"
  },
  polygonOptions: {
    fillColor: "#rrggbb",
    strokeColor: "#rrggbb",
    strokeWeight: "int"
  },
  polylineOptions: {
    strokeColor: "#rrggbb",
    strokeWeight: "int"  }
}, {
  where: ...
  ...
}]

Os estilos são aplicados sobre todos os estilos especificados na interface web das Fusion Tables. Os estilos fornecidos ao construtor de camadas são aplicados na ordem que estão listados. Recursos que correspondem a várias regras usam o último estilo correspondente.

Para criar um estilo padrão aplicável a todos os recursos, crie um estilo sem cláusula where:

styles: [{
  markerOptions: {
    iconName: "large_green"
  }
}]

O exemplo abaixo mostra:

  • Um estilo padrão que colore todos os polígonos com verde e um nível de opacidade 0.3.
  • Todos os polígonos em que a coluna "birds" excede 300 são coloridos com azul. Eles retêm o nível de opacidade definido pelo estilo padrão.
  • O nível de opacidade de todos os polígonos em que a coluna "population" excede 5 é definido como 1.0. Eles retêm os valores de fillColor.
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -25, lng: 133},
    zoom: 4
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry',
      from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'
    },
    styles: [{
      polygonOptions: {
        fillColor: '#00FF00',
        fillOpacity: 0.3
      }
    }, {
      where: 'birds > 300',
      polygonOptions: {
        fillColor: '#0000FF'
      }
    }, {
      where: 'population > 5',
      polygonOptions: {
        fillOpacity: 1.0
      }
    }]
  });
  layer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -25, lng: 133},
    zoom: 4
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'geometry',
      from: '1ertEwm-1bMBhpEwHhtNYT47HQ9k2ki_6sRa-UQ'
    },
    styles: [{
      polygonOptions: {
        fillColor: '#00FF00',
        fillOpacity: 0.3
      }
    }, {
      where: 'birds > 300',
      polygonOptions: {
        fillColor: '#0000FF'
      }
    }, {
      where: 'population > 5',
      polygonOptions: {
        fillOpacity: 1.0
      }
    }]
  });
  layer.setMap(map);
}

Ver exemplo de Fusion Table

Mapas de calor de Fusion Table

As Fusion Tables também oferecem suporte limitado a mapas de calor, onde a densidade das localizações correspondentes é exibida usando uma paleta de cores. Os mapas de calor atuais usam um gradiente de vermelho (denso) a verde (esparso) para indicar a prevalência relativa das localizações associadas. Ative um mapa de calor definindo o parâmetro heatmap das FusionTablesLayerOptions da camada como enabled: true.

Observação: os mapas de calor das Fusion Tables são renderizados no lado do servidor. Para usar mapas de calor no lado do cliente, use a camada de mapa de calor.

O exemplo abaixo mostra dados históricos de terremotos usando um mapa de calor:

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 10, lng: -140},
    zoom: 3
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'location',
      from: '1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ'
    },
    heatmap: {
      enabled: true
    }
  });

  layer.setMap(map);
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 10, lng: -140},
    zoom: 3
  });

  var layer = new google.maps.FusionTablesLayer({
    query: {
      select: 'location',
      from: '1xWyeuAhIFK_aED1ikkQEGmR8mINSCJO9Vq-BPQ'
    },
    heatmap: {
      enabled: true
    }
  });

  layer.setMap(map);
}

Ver exemplo de Fusion Table

Enviar comentários sobre…

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