Importar dados para o Maps

Visão geral

Saiba como importar dados GeoJSON de uma fonte local ou remota e mostrá-los no mapa. Neste tutorial, usamos 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.

TypeScript

let map: google.maps.Map;

function initMap(): void {
  map = new google.maps.Map(document.getElementById("map") as HTMLElement, {
    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.
  const 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.
const eqfeed_callback = function (results: any) {
  for (let i = 0; i < results.features.length; i++) {
    const coords = results.features[i].geometry.coordinates;
    const latLng = new google.maps.LatLng(coords[1], coords[0]);

    new google.maps.Marker({
      position: latLng,
      map: map,
    });
  }
};

declare global {
  interface Window {
    initMap: () => void;
    eqfeed_callback: (results: any) => void;
  }
}
window.initMap = initMap;
window.eqfeed_callback = eqfeed_callback;index.ts

JavaScript

let 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.
  const 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.
const eqfeed_callback = function (results) {
  for (let i = 0; i < results.features.length; i++) {
    const coords = results.features[i].geometry.coordinates;
    const latLng = new google.maps.LatLng(coords[1], coords[0]);

    new google.maps.Marker({
      position: latLng,
      map: map,
    });
  }
};

window.initMap = initMap;
window.eqfeed_callback = eqfeed_callback;index.js

CSS

/*
 * 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.css

HTML

<html>
  <head>
    <title>Earthquake Markers</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>

    <!--
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initMap&v=weekly"
      defer
    ></script>
  </body>
</html>index.html

Testar exemplo de código

Stackblitz.com CodeSandbox.io JSFiddle.net GitPod.io Google Cloud Shell

Carregar dados

Nesta seção, mostramos como carregar dados do mesmo domínio do seu aplicativo da API Maps JavaScript ou de outro.

Carregar dados do mesmo domínio

A camada de dados do Google Maps oferece um contêiner para dados geoespaciais arbitrários (incluindo GeoJSON). Se os dados estiverem em um arquivo hospedado no mesmo domínio do aplicativo da API Maps JavaScript, faça o carregamento deles usando o método map.data.loadGeoJson(). O arquivo precisa estar no mesmo domínio, mas é possível manter a hospedagem em outro subdomínio. Por exemplo, é possível fazer uma solicitação para files.example.com de www.example.com.

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

Carregar dados de vários domínios

Caso a configuração do domínio permita essa solicitação, você também poderá solicitar dados de um domínio que não seja o seu. O padrão dessa permissão é chamado de Compartilhamento de recursos entre origens (CORS). Se um domínio permitir solicitações de vários domínios, o cabeçalho de resposta vai incluir a seguinte declaração:

Access-Control-Allow-Origin: *

Use as Ferramentas para desenvolvedores do Chrome (DevTools) para descobrir se um domínio ativou o CORS.

Carregar dados desse domínio é o mesmo que carregar o JSON do mesmo domínio:

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

Solicitar JSONP

O domínio de destino precisa aceitar solicitações de JSONP para usar esse método.

Para solicitar o JSONP, use o createElement() para adicionar uma tag script ao cabeçalho do 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 transmite os dados como um argumento para outro script, geralmente chamado de callback(). O domínio de destino define o nome do script de chamada de retorno, 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 da chamada de retorno como eqfeed_callback.

Você precisa 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 do GeoJSON analisados no mapa.

Estilizar os dados

É possível alterar a aparência dos seus dados adicionando dados do GeoJSON a um objeto Map. Leia o Guia para desenvolvedores e confira mais informações sobre como estilizar seus dados.

Saiba mais

O GeoJSON é um formato aberto amplamente usado para codificar dados geográficos com base em JSON (JavaScript Object Notation). Ferramentas e métodos JavaScript criados para dados do JSON também funcionam com o GeoJSON. Leia o Guia para desenvolvedores para mais informações.
JSONP significa JSON com padding. Ele é um método de comunicação usado em programas JavaScript executados em navegadores da Web para solicitar dados de um servidor em um domínio diferente.