Cómo importar datos de GeoJSON a Maps

Descripción general

Obtén información sobre cómo importar datos de GeoJSON desde una fuente local o remota y mostrarlos en tu mapa. En este instructivo, se usa el siguiente mapa a fin de ilustrar varias técnicas para importar datos en los mapas.

En la siguiente sección, se muestra el código completo que necesitas para crear el mapa de este instructivo.

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>

    <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 script 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

Prueba la muestra

Cómo cargar datos

En esta sección, se muestra cómo cargar datos desde el mismo dominio que la aplicación de la API de Maps JavaScript o desde uno diferente.

Cómo cargar datos del mismo dominio

La capa de datos de Google Maps proporciona un contenedor para datos geoespaciales arbitrarios (incluido GeoJSON). Si tus datos están en un archivo alojado en el mismo dominio que tu aplicación de la API de Maps JavaScript, puedes cargarlos con el método map.data.loadGeoJson(). El archivo debe estar en el mismo dominio, pero puedes alojarlo en un subdominio diferente. Por ejemplo, puedes realizar una solicitud a files.example.com desde www.example.com.

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

Cómo cargar datos de diferentes dominios

También puedes solicitar datos de un dominio que no sea el tuyo, si la configuración del dominio lo permite. El estándar para este permiso se denomina Uso compartido de recursos entre dominios (CORS). Si un dominio permitió las solicitudes entre dominios, su encabezado de respuesta debe incluir la siguiente declaración:

Access-Control-Allow-Origin: *

Usa las herramientas para desarrolladores de Chrome para comprobar si un dominio habilitó el CORS.

La carga de datos desde un dominio como este es igual a la carga de JSON desde el mismo dominio:

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

Cómo solicitar JSONP

El dominio de destino debe admitir solicitudes de JSONP para poder usar esta técnica.

Para solicitar JSONP, usa createElement() para agregar una etiqueta script al encabezado del 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);

Cuando se ejecuta la secuencia de comandos, el dominio de destino pasa los datos como un argumento a otra secuencia de comandos, generalmente denominada callback(). El dominio de destino define el nombre de la secuencia de comandos de devolución de llamada, que es el primer nombre que aparece en la página cuando cargas la URL de destino en un navegador.

Por ejemplo, si cargas http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp en la ventana de tu navegador, verás el nombre de la devolución de llamada como eqfeed_callback.

Debes definir la secuencia de comandos de devolución de llamada en tu código:

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

Usa el método addGeoJson() para colocar los datos GeoJSON analizados en el mapa.

Cómo definir el diseño de los datos

Si deseas cambiar el aspecto de tus datos, agrega datos GeoJSON a un objeto Map. Consulta la guía para desarrolladores a fin de obtener más información sobre cómo definir el diseño de tus datos.

Más información

  • GeoJSON es un formato abierto muy utilizado para codificar datos geográficos que está basado en JSON (JavaScript Object Notation). Las herramientas y los métodos de JavaScript diseñados para los datos JSON también funcionan con GeoJSON. Consulta la guía para desarrolladores si quieres obtener más información.
  • JSONP significa JSON con padding. Es un método de comunicación que se usa en los programas JavaScript que se ejecutan en navegadores web para solicitar datos a un servidor en un dominio diferente.