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 dados

A camada de dados do Google Maps oferece um contêiner para dados geoespaciais arbitrários. Use a camada de dados para armazenar dados personalizados ou exibir dados GeoJSON em um mapa do Google Maps.

Visão geral

Assista a este vídeo do DevBytes para saber mais sobre a camada de dados.

A Google Maps JavaScript API permite marcar um mapa com diversas sobreposições, como marcadores, polilinhas, polígonos etc. Todas essas anotações combinam informações de estilo com dados de localizações. A classe google.maps.Data é um contêiner para dados geoespaciais arbitrários. Em vez de adicionar essas sobreposições, use a camada de dados para adicionar dados geográficos arbitrários ao mapa. Se os dados contêm geometrias como pontos, linhas ou polígonos, a API as renderiza por padrão como marcadores, polilinhas e polígonos. Aplique estilo a esses recursos da mesma forma que em uma sobreposição normal ou aplique regras de estilo com base em outras propriedades contidas no conjunto de dados.

A classe google.maps.Data permite:

  • Desenhar polígonos no mapa.
  • Adicionar dados em GeoJSON ao mapa.
    GeoJSON é um padrão da internet para dados geoespaciais. A classe Data segue a estrutura do GeoJSON na representação de dados e facilita a exibição de dados do GeoJSON. Use o método loadGeoJson() para importar facilmente dados GeoJSON e exibir pontos, linestrings e polígonos.
  • Use google.maps.Data para modelar dados arbitrários.
    A maioria das organizações do mundo real tem outras propriedades associadas a elas. Por exemplo, lojas têm horários de funcionamento, vias têm velocidade do trânsito e cada grupo de bandeirantes tem a área de vendas de biscoitos. O google.maps.Data permite modelar essas propriedades e aplicar o estilo adequado aos dados.
  • Escolha o modo de representação dos dados e mude para outra a qualquer momento.
    A camada “Data” permite tomar decisões sobre a visualização e a interação dos dados. Por exemplo, olhando para um mapa de lojas de conveniência, você pode optar por exibir apenas as que vendem passagens de transporte público.

Desenhar um polígono

A classe Data.Polygon lida com o enrolamento de polígonos para você. Você pode passar uma matriz ou um ou mais anéis lineares, definidos na forma de coordenadas de latitude/longitude. O primeiro anel linear define o limite externo do polígono. Se você passar mais de um anel linear, o segundo e os demais anéis lineares serão usados para definir caminhos internos (furos) no polígono.

O exemplo a seguir cria um polígono retangular com dois furos:

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

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

  // Define the LatLng coordinates for the outer path.
  var outerCoords = [
    {lat: -32.364, lng: 153.207}, // north west
    {lat: -35.364, lng: 153.207}, // south west
    {lat: -35.364, lng: 158.207}, // south east
    {lat: -32.364, lng: 158.207}  // north east
  ];

  // Define the LatLng coordinates for an inner path.
  var innerCoords1 = [
    {lat: -33.364, lng: 154.207},
    {lat: -34.364, lng: 154.207},
    {lat: -34.364, lng: 155.207},
    {lat: -33.364, lng: 155.207}
  ];

  // Define the LatLng coordinates for another inner path.
  var innerCoords2 = [
    {lat: -33.364, lng: 156.207},
    {lat: -34.364, lng: 156.207},
    {lat: -34.364, lng: 157.207},
    {lat: -33.364, lng: 157.207}
  ];

  map.data.add({geometry: new google.maps.Data.Polygon([outerCoords,
                                                        innerCoords1,
                                                        innerCoords2])})
}
<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>
// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

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

  // Define the LatLng coordinates for the outer path.
  var outerCoords = [
    {lat: -32.364, lng: 153.207}, // north west
    {lat: -35.364, lng: 153.207}, // south west
    {lat: -35.364, lng: 158.207}, // south east
    {lat: -32.364, lng: 158.207}  // north east
  ];

  // Define the LatLng coordinates for an inner path.
  var innerCoords1 = [
    {lat: -33.364, lng: 154.207},
    {lat: -34.364, lng: 154.207},
    {lat: -34.364, lng: 155.207},
    {lat: -33.364, lng: 155.207}
  ];

  // Define the LatLng coordinates for another inner path.
  var innerCoords2 = [
    {lat: -33.364, lng: 156.207},
    {lat: -34.364, lng: 156.207},
    {lat: -34.364, lng: 157.207},
    {lat: -33.364, lng: 157.207}
  ];

  map.data.add({geometry: new google.maps.Data.Polygon([outerCoords,
                                                        innerCoords1,
                                                        innerCoords2])})
}

Ver exemplo.

Carregar GeoJSON

O GeoJSON é um padrão comum para compartilhar dados geoespaciais na Internet. Ele é leve e pode ser lido facilmente, o que é ideal para compartilhamento e colaboração. Na camada de dados, adicione dados GeoJSON a um mapa do Google Maps com apenas uma linha de código.

map.data.loadGeoJson('google.json');

Todo mapa tem um objeto map.data, que atua como uma camada de dados para dados geoespaciais arbitrários, incluindo GeoJSON. Carregue e exiba um arquivo GeoJSON chamando o método loadGeoJSON() do objeto data. O exemplo abaixo mostra como adicionar um mapa e carregar dados GeoJSON externos.

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

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
      'https://storage.googleapis.com/mapsdevsite/json/google.json');
}
<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>
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -28, lng: 137}
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
      'https://storage.googleapis.com/mapsdevsite/json/google.json');
}

Ver exemplo.

Exemplo de GeoJSON

A maioria dos exemplos desta página usa um arquivo GeoJSON comum. Esse arquivo define os seis caracteres em "Google" como polígonos sobre a Austrália. Você pode copiar ou modificar esse arquivo e testar a camada de dados.

Observação: para carregar um arquivo JSON de outro domínio, esse domínio precisa ativar o compartilhamento de recursos entre domínios.

Veja a seguir o texto completo do arquivo, expandindo a seta pequena ao lado das palavras google.json.

Aplicar estilo a dados GeoJSON

Use o método Data.setStyle() para especificar a aparência dos dados. O método setStyle() aceita um literal do objeto StyleOptions ou uma função que calcula o estilo para cada recurso.

Regras de estilo simples

A maneira mais simples de aplicar estilo é passar um literal do objeto StyleOptions para setStyle(). Essa ação define um único estilo para cada recurso na coleção. Observe que cada tipo de recurso somente é capaz de renderizar um subconjunto das opções disponíveis. Isso significa que é possível combinar estilos para tipos de recursos diferentes em um único literal de objeto. Por exemplo, o fragmento a seguir define um icon personalizado, que afeta apenas geometrias de ponto, e fillColor, que afeta apenas polígonos.

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

Encontre mais informações sobre combinações válidas de estilo e recursos em Opções de estilo.

Veja a seguir um exemplo de definição de traço e cor de preenchimento para diversos recursos usando um literal de objeto StyleOptions. Observe que o mesmo estilo é aplicado a todos os polígonos.

// Set the stroke width, and fill color for each polygon
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 1
});

Ver o exemplo

Regras de estilo declarativas

Para atualizar o estilo de um grande número de sobreposições, como marcadores ou polilinhas, normalmente é necessário acessar cada sobreposição no mapa e definir o estilo individualmente. A camada de dados permite definir regras de forma declarativa para aplicação em todo o conjunto de dados. Quando os dados, ou as regras, são atualizados, o estilo é aplicado automaticamente a cada recurso. Use as propriedades dos recursos para personalizar seu estilo.

Por exemplo, o código abaixo define a cor de cada caractere no google.json examinando sua posição no conjunto de caracteres ASCII. Neste caso, codificamos a posição do caractere juntamente com os dados.

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

Remover estilos

Para remover todos os estilos aplicados, passe um literal de objeto vazio para o método setStyles().

// Remove custom styles.
map.data.setStyle({});

Essa ação remove todos os estilos personalizados especificados e os recursos são renderizados usando os estilos padrão. Para deixar de renderizar os recursos, defina a propriedade visible de StyleOptions como false.

// Hide the Data layer.
map.data.setStyle({visible: false});

Substituir estilos padrão

Normalmente, as regras de estilo são aplicadas a todos os recursos da camada de dados. No entanto, pode ser necessário aplicar regras de estilo especiais a recursos específicos. Por exemplo, como uma forma de destacar um recurso ao clicar.

Para aplicar regras de estilo especiais, use o método overrideStyle(). Todas as propriedades alteradas com o método overrideStyle() são aplicadas complementarmente aos estilos globais já especificados em setStyle(). Por exemplo, o código a seguir altera a cor de preenchimento de um polígono ao clicar, mas não define nenhum outro estilo.

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
});

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

Chame o método revertStyles() para remover todas as substituições de estilo.

Opções de estilo

As opções de estilo disponíveis para cada recurso dependem do tipo do recurso. Por exemplo, fillColor é renderizado apenas em geometrias de polígono e icon é exibido apenas em uma geometria de pontos. Há mais informações disponíveis na documentação de referência para StyleOptions.

Disponível em todas as geometrias

  • clickable: se true, o recurso recebe eventos de mouse e toque.
  • visible: se true, o recurso é visível.
  • zIndex: todos os recursos são exibidos no mapa na ordem de seu zIndex. Os recursos com valores mais altos são exibidos na frente de recursos com valores menores. Os marcadores são sempre exibidos na frente de linestrings e polígonos.

Disponíveis em geometrias de pontos

  • cursor: cursor do mouse a ser exibido na focalização.
  • icon: ícone a ser exibido para a geometria de pontos.
  • shape: define o mapa de imagem usado para detecção de hits.
  • title: texto da sobreposição.

Disponíveis em geometrias de linha

  • strokeColor: cor do traço. Todas as cores CSS3 são permitidas, exceto cores nomeadas estendidas.
  • strokeOpacity: opacidade do traço, entre 0.0 e 1.0.
  • strokeWeight: largura do traço em pixels.

Disponíveis em geometria de polígonos

  • fillColor: cor de preenchimento. Todas as cores CSS3 são permitidas, exceto cores nomeadas estendidas.
  • fillOpacity: opacidade do preenchimento, entre 0.0 e 1.0.
  • strokeColor: cor do traço. Todas as cores CSS3 são permitidas, exceto cores nomeadas estendidas.
  • strokeOpacity: opacidade do traço, entre 0.0 e 1.0.
  • strokeWeight: largura do traço em pixels.

Adicionar manipuladores de evento

Recursos respondem a eventos, como mouseup ou mousedown. Adicione ouvintes de eventos para que os usuários possam interagir com os dados no mapa. No exemplo abaixo, adicionamos um evento mouseover, que exibe informações sobre o recurso sob o cursor do mouse.

// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
  document.getElementById('info-box').textContent =
      event.feature.getProperty('letter');
});

Eventos de camada de dados

Os eventos a seguir são comuns a todos os recursos, independentemente do tipo da geometria:

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

Informações adicionais sobre esses eventos podem ser encontradas na documentação de referência da classe google.maps.data.

Alterar dinamicamente a aparência

Defina o estilo da camada de dados passando para o método google.maps.data.setStyle() uma função que calcula o estilo de cada recurso. Essa função é chamada todas as vezes que as propriedades de um recurso são atualizadas.

No exemplo a seguir, adicionamos um ouvinte de eventos para o evento click que atualiza a propriedade isColorful do recurso. O estilo do recurso é atualizado para refletir a mudança assim que a propriedade é definida.

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
  var color = 'gray';
  if (feature.getProperty('isColorful')) {
    color = feature.getProperty('color');
  }
  return /** @type {google.maps.Data.StyleOptions} */({
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2
  });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
  event.feature.setProperty('isColorful', true);
});

// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
  map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});

Ver o exemplo

Enviar comentários sobre…

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