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

Como importar dados para o Maps

Visão geral

Aprenda a importar dados de GeoJSON de uma fonte local ou remota e exibi-los em seu mapa. Este tutorial usa o mapa abaixo para ilustrar várias técnicas de importação de dados para mapas.

A seção abaixo mostra todo o código necessário para criar o mapa neste tutorial.

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: new google.maps.LatLng(2.8,-187.3),
    mapTypeId: 'terrain'
  });

  // Create a <script> tag and set the USGS URL as the source.
  var script = document.createElement('script');
  // This example uses a local copy of the GeoJSON stored at
  // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
  script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
  document.getElementsByTagName('head')[0].appendChild(script);
}

// Loop through the results array and place a marker for each
// set of coordinates.
window.eqfeed_callback = function(results) {
  for (var i = 0; i < results.features.length; i++) {
    var coords = results.features[i].geometry.coordinates;
    var latLng = new google.maps.LatLng(coords[1],coords[0]);
    var marker = new google.maps.Marker({
      position: latLng,
      map: 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>

Sua vez de tentar

Passe o cursor na parte superior direita do bloco de código para copiar o código ou abri-lo no JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <style>
      /* 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;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 2,
          center: new google.maps.LatLng(2.8,-187.3),
          mapTypeId: 'terrain'
        });

        // Create a <script> tag and set the USGS URL as the source.
        var script = document.createElement('script');
        // This example uses a local copy of the GeoJSON stored at
        // http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp
        script.src = 'https://developers.google.com/maps/documentation/javascript/examples/json/earthquake_GeoJSONP.js';
        document.getElementsByTagName('head')[0].appendChild(script);
      }

      // Loop through the results array and place a marker for each
      // set of coordinates.
      window.eqfeed_callback = function(results) {
        for (var i = 0; i < results.features.length; i++) {
          var coords = results.features[i].geometry.coordinates;
          var latLng = new google.maps.LatLng(coords[1],coords[0]);
          var marker = new google.maps.Marker({
            position: latLng,
            map: map
          });
        }
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Carregamento de dados

Esta seção mostra como carregar dados do mesmo domínio que seu aplicativo da Maps JavaScript API ou de um domínio diferente.

Carregamento de dados do mesmo domínio

A Camada de dados do Google Maps fornece um contêiner para dados geoespaciais arbitrários (incluindo GeoJSON). Se seus dados estão em um arquivo hospedado no mesmo domínio que o aplicativo da Maps JavaScript API, você pode carregá-los usando o método map.data.loadGeoJson(). O arquivo deve estar no mesmo domínio, mas você pode hospedá-lo em um subdomínio diferente. Por exemplo, você pode fazer uma solicitação para files.example.com de www.example.com.

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

Carregamento de dados entre domínios

Você também pode solicitar dados de um domínio diferente do seu caso a configuração do domínio permita tal solicitação. O padrão para essa permissão é chamado Compartilhamento de recursos entre origens (CORS). Se um domínio tiver permitido solicitações entre domínios, o cabeçalho de resposta deverá incluir a seguinte declaração:

Access-Control-Allow-Origin: *

Use as Ferramentas para desenvolvedor do Chrome (DevTools) para descobrir se um domínio tem CORS ativado.

Para carregar dados de um domínio é o mesmo que carregar JSON do mesmo domínio:

map.data.loadGeoJson('http://www.CORS-ENABLED-SITE.com/data.json');

Solicitação de JSONP

O domínio de destino deve ter suporte para solicitações para JSONP para poder usar esta técnica.

Para solicitar JSONP, use createElement() para adicionar uma tag script ao cabeçalho de seu documento.

var script = document.createElement('script');
script.src = 'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp';
document.getElementsByTagName('head')[0].appendChild(script);

Quando o script é executado, o domínio de destino passa os dados como argumento para outro script, normalmente chamado callback(). O domínio de destino define o nome do script de retorno de chamada, que é o primeiro nome na página quando você carrega o URL de destino em um navegador.

Por exemplo, carregue http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp na janela do navegador para revelar o nome do retorno de chamada como eqfeed_callback.

Você deve definir o script de retorno de chamada no código:

function eqfeed_callback(response) {
  map.data.addGeoJson(response);
}

Use o método addGeoJson() para colocar os dados GeoJSON analisados no mapa.

Aplicação de estilo aos dados

Você pode alterar a aparência dos dados adicionando dados de GeoJSON a um objeto Map. Leia o guia do desenvolvedor para obter mais informações sobre como aplicar estilo a seus dados.

Saiba mais

  • GeoJSON é um formato aberto amplamente usado para codificar dados geográficos baseados em JSON (JavaScript Object Notation). Ferramentas e métodos do JavaScript projetados para dados do JSON também funcionam com GeoJSON. Leia o guia do desenvolvedor para obter mais informações.
  • JSONP significa JSON preenchido. É um método de comunicação usado em programas JavaScript que executam em navegadores da Web para solicitar dados de um servidor em um domínio diferente.

Enviar comentários sobre…

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