GeoJSON-Daten in Google Maps importieren

Übersicht

Hier erfahren Sie, wie Sie GeoJSON-Daten aus einer lokalen oder Remote-Quelle importieren und auf der Karte darstellen. Wir werden die folgende Karte verwenden, um verschiedene Verfahren zum Importieren von Daten in Karten zu veranschaulichen.

Der folgende Abschnitt enthält den gesamten Code, den Sie zum Erstellen der Karte in dieser Anleitung benötigen.

TypeScriptJavaScriptCSSHTML
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
 
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
 
/* 
 * 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>
  <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

Testbeispiel

Daten laden

In diesem Abschnitt erfahren Sie, wie Sie Daten aus der Domain Ihrer Maps JavaScript API-Anwendung oder einer anderen Domain laden.

Daten aus derselben Domain laden

Die Google Maps-Datenebene ist ein Container für beliebige raumbezogene Daten, einschließlich GeoJSON. Befinden sich die Daten in einer Datei, die auf derselben Domain wie Ihre Maps JavaScript API-Anwendung gehostet wird, können Sie sie mit der Methode map.data.loadGeoJson() laden. Die Datei muss sich in derselben Domain befinden, kann aber in einer anderen Subdomain gehostet werden. Beispielsweise wäre eine Anfrage an dateien.beispiel.de von www.beispiel.de möglich.

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

Daten aus einer anderen Domain laden

Sie können auch Daten aus einer anderen Domain anfordern, sofern deren Konfiguration solche Anfragen zulässt. Der Mechanismus, durch den das ermöglicht wird, heißt Cross-Origin Resource Sharing (CORS). Falls domainübergreifende Anfragen für eine Domain zulässig sind, muss deren Antwortheader die folgende Deklaration enthalten:

Access-Control-Allow-Origin: *

Mit den Chrome-Entwicklertools lässt sich herausfinden, ob CORS für eine Domain aktiviert ist.

Der Ablauf für das Laden von Daten aus einer solchen Domain entspricht dem für das Laden von JSON aus derselben Domain:

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

JSONP anfordern

Die Zieldomain muss Anfragen für JSONP unterstützen, damit dieses Verfahren verwendet werden kann.

Wenn Sie JSONP anfordern möchten, verwenden Sie createElement(), um ein script-Tag in das Head-Element Ihres Dokuments einzufügen:

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);

Wenn das Script ausgeführt wird, übergibt die Zieldomain die Daten als Argument an ein anderes Script. Dieses hat normalerweise den Namen callback(). Der Name des Callback-Scripts richtet sich nach der Zieldomain. Es ist der erste Name auf der Seite, wenn Sie die Ziel-URL in einem Browser laden.

Wenn Sie beispielsweise http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp in Ihr Browserfenster laden, wird eqfeed_callback als Callback-Name angezeigt.

Sie müssen das Callback-Script in Ihrem Code definieren:

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

Verwenden Sie die Methode addGeoJson(), um die geparsten GeoJSON-Daten auf der Karte zu platzieren.

Datendarstellung gestalten

Sie können die Darstellung der Daten ändern, indem Sie einem Map-Objekt GeoJSON-Daten hinzufügen. Weitere Informationen finden Sie im Entwicklerhandbuch.

Weitere Informationen

  • GeoJSON ist ein gängiges offenes Format für die Codierung geografischer Daten, das auf JSON (JavaScript Object Notation) beruht. JavaScript-Tools und ‑Methoden für JSON-Daten funktionieren auch mit GeoJSON. Weitere Informationen finden Sie im Entwicklerhandbuch.
  • JSONP steht für „JSON mit Padding“. Es ist eine Kommunikationsmethode und wird in JavaScript-Programmen verwendet, die in Webbrowsern ausgeführt werden, um Daten von einem Server in einer anderen Domain anzufordern.