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

Data-Ebene

Die Google Maps Datenebene stellt einen Container für beliebige raumbezogene Geodaten bereit. Mithilfe der Datenebene können Sie Ihre benutzerdefinierten Daten hinterlegen oder GeoJSON-Daten in einer Google-Karte darstellen.

Übersicht

Um mehr über die Data-Ebene zu erfahren, sehen Sie sich dieses DevBytes-Video an.

Mit Google Maps JavaScript API können Sie verschiedene Überlagerungen zu einer Karte hinzufügen, z. B. Marker, Polylinien, Polygone usw. Mit jeder dieser Anmerkungen werden Formatierungsangaben mit Standortdaten kombiniert. Die Klasse google.maps.Data dient als Container für beliebige raumbezogene Geodaten. Statt diese Überlagerungen hinzuzufügen, können Sie die Data-Ebene verwenden, um beliebige geografische Daten zu Ihrer Karte hinzuzufügen. Wenn diese Daten geometrische Formen, z. B. Punkte, Linien oder Polygone, enthält, werden diese von der API standardmäßig als Marker, Polylinien oder Polygone wiedergegeben. Sie können diese Funktionen wie eine normale Überlagerung formatieren oder Formatierungsregeln auf Grundlage anderer in Ihrem Datensatz definierter Eigenschaften übernehmen.

Mit der Klasse google.maps.Data können Sie folgende Aktionen ausführen:

  • Auf Ihrer Karte Polygone zeichnen
  • Ihrer Karte GeoJSON-Daten hinzufügen
    GeoJSON ist ein Internetstandard für raumbezogene Daten. Die Klasse Data folgt hinsichtlich der Wiedergabe der Daten der GeoJSON-Struktur, sodass sich GeoJSON-Daten problemlos anzeigen lassen. Verwenden Sie die Methode loadGeoJson(), um GeoJSON-Daten ganz einfach zu importieren und Punkte, Linienzeichenfolgen und Polygone anzuzeigen.
  • google.maps.Data verwenden, um beliebige Daten zu modellieren
    Den meisten Entitäten der realen Welt sind weitere Eigenschaften zugeordnet. Beispielsweise haben Geschäfte Öffnungszeiten, Straßen haben Verkehrsgeschwindigkeiten, und jede Gruppe von Pfadfinderinnen hat ihr eigenes Gebiet für den Verkauf von Keksen. Mit google.maps.Data können Sie diese Eigenschaften modellieren und Ihre Daten entsprechend formatieren.
  • Auswählen, wie Ihre Daten dargestellt werden und sich spontan wieder umentscheiden
    Mit der Datenebene können Sie die Darstellung und Interaktion Ihrer Daten gestalten. Beispielsweise können Sie bei der Betrachtung einer Karte mit Lebensmittelgeschäften festlegen, dass nur die Geschäfte angezeigt werden, die Fahrkarten für öffentliche Verkehrsmittel verkaufen.

Ein Polygon zeichnen

Die Klasse Data.Polygon übernimmt die Umlaufverarbeitung der Polygone für Sie. Sie können ihr ein Array aus einem oder mehreren linearen Ringen übergeben, die als Breitengrad/Längengrad-Koordinaten definiert sind. Der erste lineare Ring definiert den äußeren Rand des Polygons. Wenn Sie mehr als einen linearen Ring übergeben, werden der zweite und die nachfolgenden Ringe zur Definition von inneren Pfaden (Löchern) im Polygon verwendet.

Mit dem folgenden Beispiel wird ein rechteckiges Polygon erstellt, in dem sich zwei Löcher befinden:

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: -33.872, lng: 151.252},
  });

  // Define the LatLng coordinates for the outer path.
  var outerCoords = [
    {lat: -32.364, lng: 153.207}, // north west
    {lat: -35.364, lng: 153.207}, // south west
    {lat: -35.364, lng: 158.207}, // south east
    {lat: -32.364, lng: 158.207}  // north east
  ];

  // Define the LatLng coordinates for an inner path.
  var innerCoords1 = [
    {lat: -33.364, lng: 154.207},
    {lat: -34.364, lng: 154.207},
    {lat: -34.364, lng: 155.207},
    {lat: -33.364, lng: 155.207}
  ];

  // Define the LatLng coordinates for another inner path.
  var innerCoords2 = [
    {lat: -33.364, lng: 156.207},
    {lat: -34.364, lng: 156.207},
    {lat: -34.364, lng: 157.207},
    {lat: -33.364, lng: 157.207}
  ];

  map.data.add({geometry: new google.maps.Data.Polygon([outerCoords,
                                                        innerCoords1,
                                                        innerCoords2])})
}
<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>
// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: -33.872, lng: 151.252},
  });

  // Define the LatLng coordinates for the outer path.
  var outerCoords = [
    {lat: -32.364, lng: 153.207}, // north west
    {lat: -35.364, lng: 153.207}, // south west
    {lat: -35.364, lng: 158.207}, // south east
    {lat: -32.364, lng: 158.207}  // north east
  ];

  // Define the LatLng coordinates for an inner path.
  var innerCoords1 = [
    {lat: -33.364, lng: 154.207},
    {lat: -34.364, lng: 154.207},
    {lat: -34.364, lng: 155.207},
    {lat: -33.364, lng: 155.207}
  ];

  // Define the LatLng coordinates for another inner path.
  var innerCoords2 = [
    {lat: -33.364, lng: 156.207},
    {lat: -34.364, lng: 156.207},
    {lat: -34.364, lng: 157.207},
    {lat: -33.364, lng: 157.207}
  ];

  map.data.add({geometry: new google.maps.Data.Polygon([outerCoords,
                                                        innerCoords1,
                                                        innerCoords2])})
}

Beispiel anzeigen

GeoJSON laden

GeoJSON ist ein allgemeiner Standard für die gemeinsame Nutzung raumbezogener Daten im Internet. Dieser schlanke und visuell lesbare Standard eignet sich ideal zum Teilen und gemeinsamen Nutzen von Daten. Mit der Data-Ebene können Sie GeoJSON-Daten mit einer einzigen Codezeile zu einer Google-Karte hinzufügen.

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

Jede Karte verfügt über ein Objekt map.data das als Datenebene für beliebige räumliche Daten einschließlich GeoJSON-Daten fungiert. Sie können eine GeoJSON-Datei laden und anzeigen, indem Sie die Methode loadGeoJSON() des Objekts data aufrufen. Das nachfolgende Beispiel zeigt, wie Sie eine Karte hinzufügen und externe GeoJSON-Daten laden.

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -28, lng: 137}
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
      'https://storage.googleapis.com/mapsdevsite/json/google.json');
}
<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>
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -28, lng: 137}
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
      'https://storage.googleapis.com/mapsdevsite/json/google.json');
}

Beispiel anzeigen

GeoJSON-Beispiel

Für die meisten Beispiele auf dieser Seite wird eine allgemeine GeoJSON-Datei verwendet. Mit dieser Datei werden die sechs Zeichen in „Google“ als Polygone über Australien definiert. Sie können diese Datei gern kopieren oder verändern, um Ihre Data-Ebene zu testen.

Hinweis: Um eine json-Datei aus einer anderen Domäne zu laden, muss für diese Domäne Cross-Origin Resource Sharing (CORS) aktiviert sein.

Sie können den Volltext der Datei nachfolgend anzeigen, indem Sie auf den kleinen Pfeil links neben den Wörtern „google.json“ klicken.

GeoJSON-Daten formatieren

Verwenden Sie die Methode Data.setStyle(), um das Erscheinungsbild Ihrer Daten festzulegen. Die Methode setStyle() verwendet entweder ein Objektliteral StyleOptions oder eine Funktion, mit der die Formatierung für die einzelnen Funktionen berechnet wird.

Einfache Formatregeln

Die einfachste Methode zur Formatierung von Funktionen ist die Übergabe eines Objektliterals StyleOptions an setStyle(). Damit wird ein einzelnes Format für jede Funktion Ihrer Kollektion definiert. Beachten Sie, dass von jedem Funktionstyp nur eine Teilmenge der verfügbaren Optionen wiedergegeben werden kann. Das bedeutet, dass es möglich ist, Formatierungen für verschiedene Funktionstypen in einem einzigen Objektliteral zu kombinieren. Mit dem nachfolgenden Codeausschnitt werden beispielsweise ein benutzerdefiniertes Symbol (icon), das sich nur auf Punktgeometrien auswirkt, und eine Füllfarbe (fillColor) definiert, die sich nur auf Polygone auswirkt.

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

Weitere Informationen zu zulässigen Kombinationen von Format/Funktion finden Sie in den Formatoptionen.

Im nachfolgenden Beispiel wird gezeigt, wie Strichstärke und Füllfarbe für verschiedene Funktionen mit einem Objektliteral StyleOptions festgelegt werden. Beachten Sie, dass jedes Polygon in gleicher Weise formatiert ist.

// Set the stroke width, and fill color for each polygon
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 1
});

Beispiel anzeigen

Deklarative Formatregeln

Wenn Sie die Formate einer großen Anzahl Überlagerungen, z. B. Marker oder Polylinien, aktualisieren möchten, müssen Sie in der Regel jede einzelne Überlagerung auf Ihrer Karte bearbeiten und einzeln formatieren. Mit der Data-Ebene können Sie Regeln deklarativ festlegen, so dass diese für Ihren gesamten Datensatz übernommen werden. Werden die Daten oder die Regeln aktualisiert, wird die Formatierung automatisch für jede Funktion übernommen. Sie können die Eigenschaften einer Funktion dazu verwenden, ihre Formate anzupassen.

Mit dem nachfolgenden Code wird beispielsweise die Farbe jedes Zeichens in google.json anhand der jeweiligen Zeichenposition im ASCII-Zeichensatz festgelegt. In diesem Fall haben wir die Zeichenposition gemeinsam mit unseren Daten codiert.

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

Formate entfernen

Um verwendete Formate zu entfernen, übergeben Sie ein leeres Objektliteral an die Methode setStyles().

// Remove custom styles.
map.data.setStyle({});

Dadurch werden sämtliche von Ihnen definierten Formate entfernt, und die Funktionen werden wieder mit den Standardformaten wiedergegeben. Wenn die Funktionen stattdessen nicht mehr wiedergegeben werden sollen, setzen Sie die Eigenschaft visible in StyleOptions auf false.

// Hide the Data layer.
map.data.setStyle({visible: false});

Standardformate übersteuern

Formatregeln werden in der Regel für jede Funktion der Data-Ebene übernommen. Es kann jedoch in besonderen Fällen gewünscht sein, für einzelne Funktionen spezielle Formatregeln zu verwenden; beispielsweise, um eine Funktion beim Anklicken hervorzuheben.

Um spezielle Formatregeln anzuwenden, verwenden Sie die Methode overrideStyle(). Jegliche Eigenschaften, die Sie mit der Methode overrideStyle() ändern, werden zusätzlich zu den globalen Formaten angewandt, die in setStyle() definiert sind. Der nachfolgende Code ändert z. B. die Füllfarbe eines Polygon beim Anklicken, definiert aber keine weiteren Formate.

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
});

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

Um alle Formatübersteuerungen zu entfernen, rufen Sie die Methode revertStyles() auf.

Formatoptionen

Die für die einzelnen Funktionen verfügbaren Formatoptionen hängen vom jeweiligen Funktionstyp ab. Beispielsweise wird die Füllfarbe (fillColor) nur bei Polygon-Geometrien wiedergegeben, während Symbole (icon) nur bei Punkt-Geometrien sichtbar sind. Weitere Informationen finden Sie in der Dokumentation zu StyleOptions.

Für alle Geometrien verfügbar

  • clickable: Ist dieser Wert auf true gesetzt, empfängt diese Funktion Maus- und Touchereignisse.
  • visible: Ist dieser Wert auf true gesetzt, ist diese Funktion sichtbar.
  • zIndex: Alle Funktionen werden auf der Karte in der Reihenfolge ihres zIndex angezeigt, wobei Funktionen mit höheren Werten vor Funktionen mit niedrigeren Werten angezeigt werden. Marker werden immer vor Linienzeichenfolgen und Polygonen angezeigt.

Für Punkt-Geometrien verfügbar

  • cursor: Beim Hovern wird der Mauscursor angezeigt.
  • icon: Für die Punkt-Geometrie anzuzeigendes Symbol.
  • shape: Definiert die Bildkarte, die für die Trefferermittlung verwendet wird.
  • title: Rollover-Text.

Für Linien-Geometrien verfügbar

  • strokeColor: Die Strichfarbe. Alle CSS3-Farben mit Ausnahme von Farben mit erweiterten Namen werden unterstützt.
  • strokeOpacity: Die Deckkraft des Strichs zwischen 0,0 und 1,0.
  • strokeWeight: Die Strichbreite in Pixeln.

Für Polygon-Geometrien verfügbar

  • fillColor: Die Füllfarbe. Alle CSS3-Farben mit Ausnahme von Farben mit erweiterten Namen werden unterstützt.
  • fillOpacity: Die Deckkraft des Füllbereichs zwischen 0.0 und 1.0.
  • strokeColor: Die Strichfarbe. Alle CSS3-Farben mit Ausnahme von Farben mit erweiterten Namen werden unterstützt.
  • strokeOpacity: Die Deckkraft des Strichs zwischen 0,0 und 1,0.
  • strokeWeight: Die Strichbreite in Pixeln.

Ereignishandler hinzufügen

Funktionen reagieren auf Ereignisse, z. B. mouseup oder mousedown. Sie können Ereignislistener hinzufügen, um dem Benutzer die Interaktion mit den Daten auf der Karte zu ermöglichen. Im nachfolgenden Beispiel fügen wir ein Mouseover-Ereignis hinzu, mit dem Informationen zur Funktion, auf die der Mauscursor zeigt, angezeigt werden.

// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
  document.getElementById('info-box').textContent =
      event.feature.getProperty('letter');
});

Data-Ebenen-Ereignisse

Die folgenden Ereignisse sind für alle Funktionen unabhängig von ihrer Geometrie verfügbar:

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

Weitere Informationen zu diesen Ereignissen finden Sie in der Referenzdokumentation zur Klasse google.maps.data.

Erscheinungsbild dynamisch anpassen

Sie können die Formatierung der Data-Ebene festlegen, indem Sie eine Funktion an die Methode google.maps.data.setStyle() übergeben, mit der die Formate jeder Funktion berechnet werden. Diese Funktion wird dann bei jeder Aktualisierung der Eigenschaften einer Funktion aufgerufen.

Im nachfolgenden Beispiel fügen wir einen Ereignislistener zum click-Ereignis hinzu, mit dem die Eigenschaft isColorful der Funktion aktualisiert wird. Die Formatierung der Funktion wird aktualisiert und gibt die Änderung wieder, sobald die Eigenschaft definiert ist.

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
  var color = 'gray';
  if (feature.getProperty('isColorful')) {
    color = feature.getProperty('color');
  }
  return /** @type {google.maps.Data.StyleOptions} */({
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2
  });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
  event.feature.setProperty('isColorful', true);
});

// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
  map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});

Beispiel anzeigen

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API