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

Heatmap-Ebene

  1. Übersicht
  2. Visualisierungsbibliothek laden
  3. Gewichtete Datenpunkte hinzufügen
  4. Heatmap-Ebene anpassen

Die Heatmap-Ebene ermöglicht die mandantenseitige Wiedergabe von Heatmaps.

Übersicht

Eine Heatmap ist eine Visualisierung, mit der die Intensität von Daten an geografischen Punkten dargestellt wird. Wenn die Heatmap-Ebene aktiviert ist, wird eine farbige Überlagerung über die Karte gelegt. Standardmäßig sind Bereiche mit höherer Aktivität rot eingefärbt, während Bereiche mit geringerer Aktivität grün dargestellt werden.

Mit Google Maps JavaScript API können Heatmap-Daten entweder mandantenseitig über die Heatmap-Ebene oder serverseitig über eine Fusion-Tabelle wiedergegeben werden. Nachfolgend sind die wichtigsten Unterschiede zwischen den beiden Methoden aufgeführt:

Heatmap-Ebene Fusion Table-Layer
Eine große Anzahl Datenpunkte kann zu einer verringerten Systemleistung führen. Mehr Datenpunkte wirken sich kaum auf die Systemleistung aus.
Möglichkeit zur Anpassung des Erscheinungsbildes der Heatmap durch Verändern von Optionen, wie z. B. Farbverlauf, Radius der Datenpunkte und Intensität der einzelnen Datenpunkte. Keine Möglichkeit zur Anpassung des Erscheinungsbildes der Heatmap.
Möglichkeit zur Steuerung, ob sich die Heatmap-Daten bei größeren Vergrößerungsstufen auflösen. Alle Heatmap-Daten werden aufgelöst, wenn Sie die Ansicht vergrößern.
Daten können in Ihrem HTML-Code hinterlegt, auf einem Server gespeichert oder während der Verarbeitung berechnet werden. Daten können zur Laufzeit geändert werden. Alle Daten müssen in einer Fusion-Tabelle hinterlegt werden. Daten können nicht einfach zur Laufzeit geändert werden.

Visualisierungsbibliothek laden

Die Heatmap-Ebene ist Teil der Bibliothek google.maps.visualization und wird nicht standardmäßig geladen. Die Visualisierungsklassen sind eine eigenständige Bibliothek, die unabhängig vom Google Maps JavaScript API-Hauptcode ist. Um die in dieser Bibliothek enthaltenen Funktionen nutzen zu können, müssen Sie die Bibliothek zunächst mithilfe des Parameters libraries in die Maps JavaScript API Bootstrap-URL laden:

<script type="text/javascript"
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=visualization">
</script>

Heatmap-Ebene hinzufügen

Um eine Heatmap-Ebene hinzuzufügen, müssen Sie zunächst ein neues Objekt HeatmapLayer erstellen und dieses mit einigen geografischen Daten in Form eines Arrays oder eines Objekts MVCArray[] bereitstellen. Die Daten können entweder ein Objekt LatLng oder ein Objekt WeightedLocation sein. Nach der Instanziierung des Objekts HeatmapLayer können Sie es zur Karte hinzufügen, indem Sie die Methode setMap() aufrufen.

Im folgenden Beispiel werden 14 Datenpunkte zu einer Karte von San Francisco hinzugefügt.

/* Data points defined as an array of LatLng objects */
var heatmapData = [
  new google.maps.LatLng(37.782, -122.447),
  new google.maps.LatLng(37.782, -122.445),
  new google.maps.LatLng(37.782, -122.443),
  new google.maps.LatLng(37.782, -122.441),
  new google.maps.LatLng(37.782, -122.439),
  new google.maps.LatLng(37.782, -122.437),
  new google.maps.LatLng(37.782, -122.435),
  new google.maps.LatLng(37.785, -122.447),
  new google.maps.LatLng(37.785, -122.445),
  new google.maps.LatLng(37.785, -122.443),
  new google.maps.LatLng(37.785, -122.441),
  new google.maps.LatLng(37.785, -122.439),
  new google.maps.LatLng(37.785, -122.437),
  new google.maps.LatLng(37.785, -122.435)
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatmapData
});
heatmap.setMap(map);

Gewichtete Datenpunkte hinzufügen

Eine Heatmap kann Objekte vom Typ LatLng oder WeightedLocation oder eine Kombination beider Objekttypen wiedergeben. Beide Objekte stehen für einen einzelnen Datenpunkt auf einer Karte; mit einem Objekt WeightedLocation können Sie jedoch zusätzlich eine Gewichtung für den jeweiligen Datenpunkt angeben. Die Gewichtung eines Datenpunkts führt dazu, dass der gewichtete Standort (WeightedLocation) mit einer stärkeren Intensität wiedergegeben wird als ein einfaches Objekt LatLng. Die Gewichtung ist eine lineare Einteilung, bei der jedes Objekt LatLng eine implizite Gewichtung von 1 besitzt. Das Hinzufügen eines einzelnen gewichteten Standorts (WeightedLocation) mit dem Wert {location: new google.maps.LatLng(37.782, -122.441), weight: 3} hat denselben Effekt, als würden Sie google.maps.LatLng(37.782, -122.441) drei Mal hinzufügen. Sie können Objekte vom Typ weightedLocation und LatLng in einem einzelnen Array kombinieren.

Das Verwenden eines Objekts WeightedLocation anstelle eines Objekts LatLng kann in folgenden Situationen sinnvoll sein:

  • Beim Hinzufügen großer Datenmengen an einem einzelnen Standort. Die Wiedergabe eines einzelnen Objekts WeightedLocation mit einer Gewichtung von 1000 erfolgt schneller als die Wiedergabe von 1000 Objekten LatLng.
  • Beim Hervorheben von Daten basierend auf beliebigen Werten. Sie können beispielsweise Objekte vom Typ LatLng verwenden, wenn Sie Erdbebendaten protokollieren; um die Stärke der einzelnen Erdbeben auf der Richterskala zu messen, wäre dagegen die Verwendung eines Objekts WeightedLocation zu bevorzugen.
/* Data points defined as a mixture of WeightedLocation and LatLng objects */
var heatMapData = [
  {location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
  new google.maps.LatLng(37.782, -122.445),
  {location: new google.maps.LatLng(37.782, -122.443), weight: 2},
  {location: new google.maps.LatLng(37.782, -122.441), weight: 3},
  {location: new google.maps.LatLng(37.782, -122.439), weight: 2},
  new google.maps.LatLng(37.782, -122.437),
  {location: new google.maps.LatLng(37.782, -122.435), weight: 0.5},

  {location: new google.maps.LatLng(37.785, -122.447), weight: 3},
  {location: new google.maps.LatLng(37.785, -122.445), weight: 2},
  new google.maps.LatLng(37.785, -122.443),
  {location: new google.maps.LatLng(37.785, -122.441), weight: 0.5},
  new google.maps.LatLng(37.785, -122.439),
  {location: new google.maps.LatLng(37.785, -122.437), weight: 2},
  {location: new google.maps.LatLng(37.785, -122.435), weight: 3}
];

var sanFrancisco = new google.maps.LatLng(37.774546, -122.433523);

map = new google.maps.Map(document.getElementById('map'), {
  center: sanFrancisco,
  zoom: 13,
  mapTypeId: 'satellite'
});

var heatmap = new google.maps.visualization.HeatmapLayer({
  data: heatMapData
});
heatmap.setMap(map);

Heatmap-Ebene anpassen

Mithilfe der folgenden Heatmap-Optionen können Sie festlegen, wie Ihre Heatmap wiedergegeben wird: Weitere Informationen finden Sie in der Dokumentation von HeatmapLayerOptions.

  • dissipating: Gibt an, ob Heatmaps sich beim Vergrößern der Ansicht auflösen. Ist dieser Wert auf „false“ gesetzt, erhöht sich der Einflussradius mit der Vergrößerungsstufe, um sicherzustellen, dass die Farbintensität an jedem geografischen Standort erhalten wird. Der Standardwert ist „false“.
  • gradient: Der Farbverlauf der Heatmap, angegeben als Array von CSS-Farbzeichenfolgen. Alle CSS3-Farben – einschließlich RGBA – mit Ausnahme von Farben mit erweiterten Namen und HSL(A)-Werten werden unterstützt.
  • maxIntensity: Die maximale Intensität der Heatmap. Standardmäßig werden Heatmap-Farben gemäß der größten Konzentration von Punkten an einem beliebigen Pixel der Karte dynamisch skaliert. Mit dieser Eigenschaft können Sie einen festen Maximalwert festlegen. Die Einstellung einer maximalen Intensität kann hilfreich sein, wenn Ihr Datensatz einige wenige Ausreißer mit außergewöhnlich hoher Intensität enthält.
  • radius: Der Einflussradius der einzelnen Datenpunkte in Pixeln.
  • opacity: Die Deckkraft der Heatmap, ausgedrückt als Zahl zwischen 0 und 1.

Im nachfolgenden Beispiel sind einige der möglichen Anpassungsoptionen dargestellt.

Beispiel einer Heatmap-Ebene anzeigen

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API