Es kann losgehen!

Bevor Sie mit der Entwicklung beginnen, lesen Sie bitte unsere Entwicklerdokumentation.

Die Google Maps JavaScript API aktivieren

Zum Einstieg führen wir Sie durch die Google Developers Console, wo Sie vorab Folgendes tun müssen:

  1. Ein Projekt erstellen oder auswählen
  2. Die Google Maps JavaScript API und zugehörige Dienste aktivieren
  3. Zugehörige Schlüssel erstellen
Weiter

Importieren von Daten in Karten

Übersicht

Informieren Sie sich, wie Sie GeoJSON-Daten aus einer lokalen oder einer Remotequelle importieren und auf Ihrer Karte anzeigen. In dieser Anleitung werden anhand der folgenden Karte verschiedene Techniken zum Importieren von Daten in Karten veranschaulicht.

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

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>


Probieren Sie es selbst aus

Bewegen Sie die Maus oben rechts über den Codeblock, um den Code zu kopieren, oder öffnen Sie ihn in 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>

Laden von Daten

In diesem Abschnitt erfahren Sie, wie Sie Daten aus derselben Domäne wie Ihre Maps JavaScript API-Anwendung oder aus einer anderen Domäne laden.

Laden von Daten aus derselben Domäne

Die Google Maps-Datenebene stellt einen Container für beliebige raumbezogene Geodaten (einschließlich GeoJSON) bereit. Falls sich Ihre Daten in einer Datei befinden, die in derselben Domäne wie die Maps JavaScript API-Anwendung gehostet wird, können Sie sie mit der Methode map.data.loadGeoJson() laden. Die Datei muss sich in derselben Domäne befinden, kann jedoch in einer anderen Unterdomäne gehostet werden. Beispiel: Sie können eine Anforderung an files.example.com von www.example.com aus durchführen.

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

Domänenübergreifendes Laden von Daten

Sie können Daten von einer anderen Domäne als Ihrer eigenen anfordern, wenn die Konfiguration der Domäne eine solche Anforderung zulässt. Der Standard für diese Berechtigung hat die Bezeichnung Cross-Origin Resource Sharing (CORS). Falls domänenübergreifende Anforderungen für eine Domäne zulässig sind, sollte ihr Antwortheader die folgende Deklaration enthalten:

Access-Control-Allow-Origin: *

Verwenden Sie die Chrome Developer Tools (DevTools), um festzustellen, ob CORS für eine Domäne aktiviert ist.

Das Laden von Daten einer solchen Domäne ist identisch mit dem Laden von JSON derselben Domäne:

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

Anfordern von JSONP

Die Zieldomäne muss Anforderungen für JSONP unterstützen, um diese Technik nutzen zu können.

Verwenden Sie zum Anfordern von JSONP createElement(), um ein Tag vom Typ script zum Kopfbereich des Dokuments hinzuzufü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 Skript ausgeführt wird, übergibt die Zieldomäne die Daten als Argument an ein weiteres Skript namens callback(). Der Name des Callback-Skripts wird anhand der Zieldomäne definiert. Es handelt sich um den ersten Namen auf der Seite, wenn Sie die Ziel-URL in einen Browser laden.

Laden Sie beispielsweise http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.geojsonp in Ihr Browserfenster, um den Callback-Namen als eqfeed_callback anzuzeigen.

Sie müssen das Callback-Skript 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.

Formatieren der Daten

Sie können die Darstellung der Daten ändern, indem Sie GeoJSON-Daten zu einem Kartenobjekt hinzufügen. Lesen Sie den Entwickler-Leitfaden, um weitere Informationen zum Formatieren Ihrer Daten zu erhalten.

Weitere Informationen

  • GeoJSON ist ein weit verbreitetes Format zum Codieren von geografischen Daten basierend auf JSON (JavaScript Object Notation). Für JSON-Daten konzipierte JavaScript-Tools und - Methoden funktionieren auch mit GeoJSON. Weitere Informationen finden Sie im Entwickler-Leitfaden.

  • JSONP steht für JSON mit Padding. Es handelt sich um eine Kommunikationsmethode, die in JavaScript-Programmen verwendet wird, die in Webbrowsern ausgeführt werden. Mit diesem Verfahren werden Daten von einem Server in einer anderen Domäne angefordert.

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API