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

Visualisieren von Daten: Kartendarstellung von Erdbeben

Übersicht

In dieser Anleitung erfahren Sie, wie Sie auf Google-Karten Daten visualisieren können. Als Beispiel visualisieren die Karten in dieser Anleitung Daten über die geografische Lage und Stärke von Erdbeben. Die Anleitung macht Sie mit Techniken vertraut, die Sie auf Ihre eigene Datenquelle anwenden und auf Google-Karten wie der folgenden in eindrucksvoller Weise einsetzen können.

In den ersten beiden oben gezeigten Frames (von links nach rechts) sehen Sie Karten mit einfachen Markern und unterschiedlich großen Kreisen. Im letzten Frame wird eine Heatmap dargestellt.

Importieren von Daten

In dieser Anleitung werden Erdbebendaten in Echtzeit aus dem United States Geological Survey (USGS) verwendet. Auf der Website des USGS werden die Daten in unterschiedlichen Formaten bereitgestellt. Diese Daten können Sie in Ihre Domäne kopieren, damit Ihre Anwendung lokal darauf zugreifen kann. In dieser Anleitung werden JSONP-Daten direkt von den USGS-Servern abgerufen. Dazu wird ein script-Tag an den Kopf des Dokuments angehängt.

Hinweis: Sie sollten nur Daten von solchen Servern anfordern, denen Sie vollständig vertrauen, um so Sicherheitsrisiken durch das Laden von domänenübergreifenden Inhalten zu vermeiden.

// Create a script tag and set the USGS URL as the source.
        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);

Platzieren von einfachen Markern

Nachdem Sie Daten zu Erdbebenorten aus dem USGS-Datenfeed in Ihre Anwendung geladen haben, können Sie sie auf der Karte anzeigen. In diesem Abschnitt wird gezeigt, wie Sie eine Karte erstellen, in der Sie mithilfe von importierten Daten einen einfachen Marker in das Epizentrum des Erdbebens platzieren.

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>

Verwenden von Formen und Heatmaps zur Anpassung von Karten

In diesem Abschnitt stellen wir Ihnen weitere Möglichkeiten zur Anpassung umfangreicher Datasets auf einer Karte vor. Rufen Sie sich die Karte ins Gedächtnis zurück, die im vorigen Abschnitt dieser Anleitung erstellt wurde und die Marker an jedem Erdbebenort zeigt. Sie können die Marker so anpassen, dass zusätzliche Daten visualisiert werden, etwa Orte mit dem größten Erdbebenaufkommen sowie die Stärke und die Tiefe der Erdbeben.

Hier sind einige Optionen zum Anpassen der einfachen Marker:

  • Verwenden der Kreisgröße:
    Mit Symbolen können Sie Kreise (oder beliebige anderen Formen) zeichnen, deren Größe relativ zur Stärke des Erdbebens ist. Auf diese Weise werden starke Erdbeben auf der Karte durch die größten Kreise dargestellt.

  • Verwenden von Heatmaps:
    Die Heatmap-Ebene in der Visualisierungsbibliothek bietet eine einfache, aber leistungsstarke Möglichkeit zur Anzeige der Erdbebenverteilung. In Heatmaps wird die Dichte von Punkten in Farben dargestellt, wodurch es einfacher wird, Bereiche hoher Aktivität zu lokalisieren. Außerdem können Heatmaps WeightedLocations verwenden, damit zum Beispiel größere Erdbeben in der Heatmap stärker hervorgehoben werden.

Kreisgröße

Auf der nachfolgenden Karte werden angepasste Marker durch Kreise dargestellt. Die Kreisgröße nimmt mit der Stärke eines Erdbebens an einem bestimmten Ort zu.

Der nachfolgende Abschnitt enthält den gesamten Code, den Sie benötigen, um eine Karte mit angepassten Kreismarkern zu erstellen.

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: {lat: -33.865427, lng: 151.196123},
    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);

  map.data.setStyle(function(feature) {
    var magnitude = feature.getProperty('mag');
    return {
      icon: getCircle(magnitude)
    };
  });
}

function getCircle(magnitude) {
  return {
    path: google.maps.SymbolPath.CIRCLE,
    fillColor: 'red',
    fillOpacity: .2,
    scale: Math.pow(2, magnitude) / 2,
    strokeColor: 'white',
    strokeWeight: .5
  };
}

function eqfeed_callback(results) {
  map.data.addGeoJson(results);
}
<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: {lat: -33.865427, lng: 151.196123},
          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);

        map.data.setStyle(function(feature) {
          var magnitude = feature.getProperty('mag');
          return {
            icon: getCircle(magnitude)
          };
        });
      }

      function getCircle(magnitude) {
        return {
          path: google.maps.SymbolPath.CIRCLE,
          fillColor: 'red',
          fillOpacity: .2,
          scale: Math.pow(2, magnitude) / 2,
          strokeColor: 'white',
          strokeWeight: .5
        };
      }

      function eqfeed_callback(results) {
        map.data.addGeoJson(results);
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Erläuterungen zum Code

In der folgenden Tabelle wird der Code erläutert, den Sie zum Erstellen von Kreismarkern benötigen.

Code und Beschreibung
  map.data.setStyle(function(feature) {
    var magnitude = feature.getProperty('mag');
    return {
      icon: getCircle(magnitude)
    };
  });

Fügt der Datenebene, die die Funktion getCircle() aufruft, ein Format hinzu.
Erstellt für den Punkt anstatt des standardmäßigen roten Markers ein benutzerdefiniertes Bild
function getCircle(magnitude) {
      var circle = {
        path: google.maps.SymbolPath.CIRCLE,
        scale: magnitude
      };
      return circle;
    }

Die Eigenschaft magnitude des Erdbebens wird an diese Funktion übergeben.
Mit getCircle() wird ein Kreis gezeichnet, dessen Größe durch den Wert für die Stärke definiert ist. Dieser Kreis wird zur Verwendung als benutzerdefinierter Marker für das Erdbeben zurückgesendet.

Heatmaps

Heatmaps vereinfachen Betrachtern das Verständnis der Verteilung von durch den USGS gemeldeten Erdbeben. Statt jeweils einen Marker auf einem Epizentrum zu platzieren, verwenden Heatmaps Farben und Formen, um die Verteilung der Daten darzustellen. In diesem Beispiel steht Rot für Bereiche hoher Erdbebenaktivität.

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

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 2,
    center: {lat: -33.865427, lng: 151.196123},
    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);

}

function eqfeed_callback(results) {
  var heatmapData = [];
  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]);
    heatmapData.push(latLng);
  }
  var heatmap = new google.maps.visualization.HeatmapLayer({
    data: heatmapData,
    dissipating: false,
    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 src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=visualization&callback=initMap" async defer></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: {lat: -33.865427, lng: 151.196123},
          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);

      }

      function eqfeed_callback(results) {
        var heatmapData = [];
        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]);
          heatmapData.push(latLng);
        }
        var heatmap = new google.maps.visualization.HeatmapLayer({
          data: heatmapData,
          dissipating: false,
          map: map
        });
      }
    </script>
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization&callback=initMap">
    </script>
  </body>
</html>

Erläuterungen zum Code

In der folgenden Tabelle wird der Code erläutert, den Sie zum Erstellen der Heatmap benötigen.

Code und Beschreibung
<script
async defer
src="https://maps.googleapis.com/maps/api/js?key
=YOUR_API_KEY&libraries=visualization&callback=initMap">
</script>

Die Bibliothek visualization dient zur Anzeige einer Heatmap.
Sie enthält die Klasse HeatmapLayer.
Wenn Sie eine Bibliothek verwenden möchten, muss sie geladen sein, wenn das Maps API JavaScript aufrufen.
  function eqfeed_callback(results) {
    var heatmapData = [];
    for (var i = 0; i &lt; results.features.length; i++) {
      var coords = results.features[i].geometry.coordinates;
      var latLng = new google.maps.LatLng(coords[1], coords[0]);
      heatmapData.push(latLng);
    }
    var heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatmapData,
      dissipating: false,
      map: map
    });
  }

Wie bei den vorigen Beispielen werden die USGS-Daten an die Funktion eqfeed_callback übergeben.
Damit werden die Koordinaten jedes Erdbebens einem Array heatmapData hinzugefügt.
Dieses Array wird dann an den Konstruktor HeatmapLayer übergeben, der die Heatmap erstellt und sie auf der Karte anzeigt.
  function eqfeed_callback(results) {
    var heatmapData = [];
    for (var i = 0; i &lt; results.features.length; i++) {
      var coords = results.features[i].geometry.coordinates;
      var latLng = new google.maps.LatLng(coords[1], coords[0]);
      var magnitude = results.features[i].properties.mag;
      var weightedLoc = {
        location: latLng,
        weight: Math.pow(2, magnitude)
      };
      heatmapData.push(weightedLoc);
    }
    var heatmap = new google.maps.visualization.HeatmapLayer({
      data: heatmapData,
      dissipating: false,
      map: map
    });
  }

Um die Ergebnisse nach der Stärke zu gewichten, können Sie stattdessen Objekte vom Typ WeightedLocation an das Array heatmapData übergeben.

Weitere Informationen

Lesen Sie mehr zu den folgenden Themen:

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API