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.

Tipp: In den Lösungen für die Filialsuche finden Sie ein weiteres Beispiel für die Verwendung von GeoJSON-Daten mit Karten.

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

Hinweis: Lesen Sie sich hierzu den Leitfaden zur Verwendung von TypeScript und Google Maps durch.

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

Hinweis: Der JavaScript-Code wird aus dem TypeScript-Snippet kompiliert.

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

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.

JSONP-Anfragen von Domains, die Sie nicht verwalten, sind sehr riskant.

Da Ihr Browser jeden Code lädt, der als Script zurückgegeben wird, sollten Sie JSONP nur von vertrauenswürdigen Domains anfordern. Im Allgemeinen wird JSONP durch CORS ersetzt, da das wesentlich sicherer ist. Sind beide verfügbar, sollte vorrangig CORS verwendet werden.

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.

GeoJSON-Geometrieobjekte importieren

Für die Methode map.data.addGeoJson() ist ein geparstes GeoJSON-Objekt vom Typ Feature oder FeatureCollection erforderlich. Eigenständige GeoJSON-Geometrieobjekte (Point, MultiPoint, LineString, MultiLineString, Polygon, MultiPolygon oder GeometryCollection) werden nicht direkt akzeptiert.

Wenn in Ihrer Datenquelle oder API-Antwort ein eigenständiges GeoJSON-Geometrieobjekt ohne "type": "Feature"-Wrapper auf oberster Ebene zurückgegeben wird, müssen Sie es in ein Feature-Objekt einfügen, bevor Sie map.data.addGeoJson() aufrufen.

Wenn die Geometrie (z. B. ein Polygon) ein geparstes JavaScript-Objekt ist, umschließen Sie sie mit einem Feature-Objekt:

const polygonGeometry = {
  type: "Polygon",
  coordinates: [
    [
      [-78.45, 35.82],
      [-78.41, 35.73],
      [-78.28, 35.66],
      [-78.45, 35.82],
    ],
  ],
};

const geoJsonFeature = {
  type: "Feature",
  geometry: polygonGeometry,
};

map.data.addGeoJson(geoJsonFeature);

Wenn die Geometrie als JSON-formatierter String zurückgegeben wird (z. B. das Feld polygon, das von einer Wetterwarnung oder einer Grenzlinienantwort zurückgegeben wird), können Sie auch einen Header voranstellen und einen Footer anhängen, um ein gültiges GeoJSON-Feature zu erstellen, bevor Sie es mit JSON.parse() parsen:

const geojson_header = "{\"type\":\"Feature\", \"geometry\": ";
const geojson_footer = "}";

map.data.addGeoJson(
    JSON.parse(geojson_header + polygon + geojson_footer));

Weitere Informationen zum Arbeiten mit Geometrien und Polygonen in der Datenschicht finden Sie im Entwicklerleitfaden für die Datenschicht.

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.