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

Formatreferenz

Mit Formatoptionen können Sie die Darstellung der Standard-Google-Kartenformate individuell gestalten, indem Sie die visuelle Anzeige von Merkmalen wie Straßen, Parks, Unternehmen und anderen Points of Interest ändern. Neben der Änderung des Formats solcher Merkmale können Sie Merkmale auch ganz ausblenden. Das heißt, dass Sie bestimmte Komponenten der Karte hervorheben können, bzw. dass Sie dafür sorgen können, dass die Karte das Format der sie umgebenden Seite komplementiert.

Beispiele

In der nachfolgenden JSON-Formatdeklaration werden alle Kartenmerkmale in Grau dargestellt, dann werden die Ein- und Ausfallstraßen blau eingefärbt und die Beschriftungen zu Landschaften werden vollständig ausgeblendet.

[
  {
    "featureType": "all",
    "stylers": [
      { "color": "#C0C0C0" }
    ]
  },{
    "featureType": "road.arterial",
    "elementType": "geometry",
    "stylers": [
      { "color": "#CCFFFF" }
    ]
  },{
    "featureType": "landscape",
    "elementType": "labels",
    "stylers": [
      { "visibility": "off" }
    ]
  }
]

Das JSON-Objekt

Eine JSON-Formatdeklaration besteht aus den folgenden Elementen:

  • featureType (optional) – die für diese Formatänderung auszuwählenden Merkmale. Merkmale sind geografische Charakteristika auf der Karte, zum Beispiel Straßen, Parks, Gewässer und mehr. Wenn Sie kein Merkmal angeben, werden alle Merkmale ausgewählt.
  • elementType (optional) – die auszuwählende Eigenschaft des angegebenen Merkmals. Elemente gehören zu einem Merkmal, einschließlich Beschriftungen und Geometrie. Wenn Sie kein Element angeben, werden alle Elemente des jeweiligen Merkmals ausgewählt.
  • stylers – die Regeln, die auf die ausgewählten Merkmale und Elemente angewandt werden sollen. Styler geben die Farbe, Sichtbarkeit und Stärke des Merkmals an. Sie können einen oder mehrere Styler auf ein Merkmal anwenden.

Um ein Format anzugeben, müssen Sie featureType- und elementType-Selektoren und Ihre stylers in einem Formatarray zusammenfassen. In einem Array lassen sich beliebige Merkmale zusammenfassen. Allerdings können Sie nur eine begrenzte Anzahl von Formaten auf einmal anwenden. Wenn Ihr Formatarray die maximale Zeichenzahl überschreitet, wird keine Formatierung angewandt.

Im weiteren Verlauf dieser Seite finden Sie weitere Informationen über Merkmale, Elemente und Styler.

featureType

Mit dem folgenden JSON-Snippet werden alle Straßen auf der Karte ausgewählt:

{
  "featureType": "road"
}


Merkmale oder Merkmalstypen sind geografische Charakteristika auf der Karte, etwa Straßen, Parks, Gewässer, Unternehmen und mehr.

Die Merkmale bilden einen Kategoriebaum mit all als Stamm. Wenn Sie kein Merkmal angeben, werden alle Merkmale ausgewählt. Wenn Sie das Merkmal all angeben, hat dies denselben Effekt.

Zu manchen Merkmalen gibt es untergeordnete Merkmale, die auf einen Punkt folgen. Beispiele: landscape.natural oder road.local. Wenn Sie nur das übergeordnete Merkmal angeben, zum Beispiel road, gelten die für das übergeordnete Merkmal angegebenen Formate auch für alle untergeordneten Merkmale, zum Beispiel road.local oder road.highway.

Beachten Sie, dass manche Elemente von übergeordneten Merkmalen möglicherweise nicht in allen ihnen untergeordneten Merkmalen enthalten sind.

Die folgenden Merkmale sind verfügbar:

  • Mit all (Standardeinstellung) werden alle Merkmale ausgewählt.
  • Mit administrative werden alle Verwaltungsgebiete ausgewählt. Die Formatierung betrifft nur die Beschriftungen der Verwaltungsgebiete, nicht die geografischen Grenzen oder die Füllbereiche.
    • Mit administrative.country werden Länder ausgewählt.
    • Mit administrative.land_parcel werden Flurstücke ausgewählt.
    • Mit administrative.locality werden Orte ausgewählt.
    • Mit administrative.neighborhood werden Stadtteile ausgewählt.
    • Mit administrative.province werden Bundesländer, Kantone, Regionen usw. ausgewählt.
  • Mit landscape werden alle Landschaften ausgewählt.
    • Mit landscape.man_made werden von Menschen geschaffene Bauwerke ausgewählt.
    • Mit landscape.natural werden Naturmerkmale ausgewählt.
    • Mit landscape.natural.landcover werden Landnutzungsmerkmale ausgewählt.
    • Mit landscape.natural.terrain werden Geländemerkmale ausgewählt.
  • Mit poi werden alle Points of Interest ausgewählt.
    • Mit poi.attraction werden Sehenswürdigkeiten ausgewählt.
    • Mit poi.business werden Unternehmen ausgewählt.
    • Mit poi.government werden Gebäude von Behörden ausgewählt.
    • Mit poi.medical werden Einrichtungen zur Notfallversorgung und -hilfe ausgewählt, zum Beispiel Krankenhäuser, Apotheken, Polizei oder Ärzte.
    • Mit poi.park werden Parks ausgewählt.
    • Mit poi.place_of_worship werden Kirchen, Tempel, Moscheen und andere Kultstätten ausgewählt.
    • Mit poi.school werden Schulen ausgewählt.
    • Mit poi.sports_complex werden Sportstätten ausgewählt.
  • Mit road werden alle Straßen ausgewählt.
    • Mit road.arterial werden Hauptverkehrsadern ausgewählt.
    • Mit road.highway werden Fernverkehrsstraßen ausgewählt.
    • Mit road.highway.controlled_access werden Autobahnen ausgewählt.
    • Mit road.local werden Nahverkehrsstraßen ausgewählt.
  • Mit transit werden alle Nah- und -Fernverkehrsstationen und -linien ausgewählt.
    • Mit transit.line werden Nah- und -Fernverkehrslinien ausgewählt.
    • Mit transit.station werden alle Nah- und -Fernverkehrsstationen ausgewählt.
    • Mit transit.station.airport werden Flughäfen ausgewählt.
    • Mit transit.station.bus werden Busbahnhöfe und -haltestellen ausgewählt.
    • Mit transit.station.rail werden Bahnhöfe ausgewählt.
  • Mit water werden Gewässer ausgewählt.

elementType

Mit dem folgenden JSON-Snippet werden die Beschriftungen für alle Nahverkehrsstraßen ausgewählt:

{
  "featureType": "road.local",
  "elementType": "labels"
}


Ein Merkmal besteht aus verschiedenen Elementen. Beispielsweise besteht eine Straße aus der Liniengrafik (Geometrie) auf der Karte sowie dem Text, der den Straßennamen angibt (Beschriftung).

Die folgenden Elemente stehen zur Verfügung, wobei Sie beachten sollten, dass ein bestimmtes Merkmal ein Element oder auch einige oder alle der Elemente unterstützen kann:

  • Mit all (Standardeinstellung) werden alle Elemente des jeweiligen Merkmals ausgewählt.
  • Mit geometry werden alle geometrischen Elemente des jeweiligen Merkmals ausgewählt.
    • Mit geometry.fill wird nur der Füllbereich der Geometrie des Merkmals ausgewählt.
    • Mit geometry.stroke wird nur der Strich der Geometrie des Merkmals ausgewählt.
  • Mit labels werden die Beschriftungstexte zum jeweiligen Merkmal ausgewählt.
    • Mit labels.icon wird nur das in der Beschriftung des Merkmals angezeigte Icon ausgewählt.
    • Mit labels.text wird nur der Text der Beschriftung ausgewählt.
    • Mit labels.text.fill wird nur der Füllbereich der Beschriftung ausgewählt. Der Füllbereich einer Beschriftung wird in der Regel als farbiger Rahmen um den Beschriftungstext dargestellt.
    • labels.text.stroke wählt nur den Strich des Beschriftungstextes aus.

stylers

Styler sind Formatierungsoptionen, die auf Kartenmerkmale und -elemente angewandt werden können.

Mit dem folgenden JSON-Snippet wird anhand eines RGB-Wertes ein Merkmal in Hellgrün angezeigt:

"stylers": [
  { "color": "#99FF33" }
]

Mit diesem Snippet wird von einem Merkmal, unabhängig von seiner Ausgangsfarbe, die ganze Farbintensität entfernt. Der Effekt ist die Darstellung des Merkmals in Graustufen:

"stylers": [
  { "saturation": -100 }
]

Ein Merkmal wird durch dieses Snippet vollständig ausgeblendet:

    "stylers": [
      { "visibility": "off" }
    ]


Die folgenden Formatoptionen werden unterstützt:

  • Mit hue (eine RGB-Hexadezimalzeichenfolge im Format #RRGGBB) wird der Basisfarbton angegeben.

    Hinweis: Mit dieser Option wird der Farbton festgelegt, während die Sättigung und die Helligkeit weiterhin der Festlegung im Standard-Google-Format entsprechen (oder in anderen Formatoptionen, die Sie für die Karte definieren). Die resultierende Farbe ist relativ zum Format der Basiskarte. Wenn Google Änderungen am Basiskartenformat vornimmt, haben diese Änderungen Auswirkungen auf die mit hue formatierten Merkmale Ihrer Karte. Besser ist es, möglichst den Absolut-color-Styler zu verwenden.

  • Mit lightness (ein Gleitkommawert zwischen –100 und 100) wird die prozentuale Änderung der Helligkeit eines Elements angegeben. Negative Werte führen zu einem dunkleren Ergebnis (wobei -100 die Farbe Schwarz ergibt), positive Werte sorgen für mehr Helligkeit (wobei +100 die Farbe Weiß ergibt).

    Hinweis: Mit dieser Option wird die Helligkeit festgelegt, während die Sättigung und der Farbton weiterhin der Festlegung im Standard-Google-Format entsprechen (oder in anderen Formatoptionen, die Sie für die Karte definieren). Die resultierende Farbe ist relativ zum Format der Basiskarte. Wenn Google Änderungen am Basiskartenformat vornimmt, haben diese Änderungen Auswirkungen auf die mit lightness formatierten Merkmale Ihrer Karte. Besser ist es, möglichst den Absolut-color-Styler zu verwenden.

  • saturation (ein Gleitkommawert zwischen –100 und 100) gibt die Veränderung der Basisfarbenintensität (Sättigung) für das Element in Prozent an.

    Hinweis: Mit dieser Option wird die Sättigung festgelegt, während der Farbton und die Helligkeit weiterhin der Festlegung im Standard-Google-Format entsprechen (oder in anderen Formatoptionen, die Sie für die Karte definieren). Die resultierende Farbe ist relativ zum Format der Basiskarte. Wenn Google Änderungen am Basiskartenformat vornimmt, haben diese Änderungen Auswirkungen auf die mit saturation formatierten Merkmale Ihrer Karte. Besser ist es, möglichst den Absolut-color-Styler zu verwenden.

  • Mit gamma (ein Gleitkommawert zwischen 0,01 und 10,0, wobei 1,0 keine Korrektur bedeutet) wird der für das Element anzuwendende Gamma-Korrekturwert angegeben. Mit Gammakorrekturen werden nichtlineare Korrekturen von Farbhelligkeiten durchgeführt. Schwarz- und Weißwerte werden nicht beeinflusst. Gammakorrekturen erfolgen in der Regel, um den Kontrast mehrerer Elemente zu ändern. Sie können den Gammakorrekturwert beispielsweise ändern, um den Kontrast zwischen den Rändern und dem Inneren von Elementen zu erhöhen oder zu verringern.

    Hinweis: Mit dieser Option wird die Helligkeit relativ zum Standard-Google-Format anhand einer Gammakurve variiert. Wenn Google Änderungen am Basiskartenformat vornimmt, haben diese Änderungen Auswirkungen auf die mit gamma formatierten Merkmale Ihrer Karte. Besser ist es, möglichst den Absolut-color-Styler zu verwenden.

  • Mit invert_lightness (auf true gesetzt) wird die derzeitige Helligkeit invertiert. Dies ist z. B. hilfreich, um schnell zu einer dunkleren Karte mit weißem Text zu wechseln.

    Hinweis: Mit dieser Option wird das Standard-Google-Format einfach invertiert. Wenn Google Änderungen am Basiskartenformat vornimmt, haben diese Änderungen Auswirkungen auf die mit invert_lightness formatierten Merkmale Ihrer Karte. Besser ist es, möglichst den Absolut-color-Styler zu verwenden.

  • Mit visibility (auf on, off oder simplified gesetzt) wird angegeben, ob und wie das Element auf der Karte dargestellt wird. Ist die Sichtbarkeit auf simplified gesetzt, werden einige Formateigenschaften der betroffenen Merkmale entfernt; so wird die Darstellung von Straßen beispielsweise zu dünneren Linien ohne Rahmen vereinfacht, und für Parks wird die Beschriftung entfernt und nur das Beschriftungsicon beibehalten.
  • Mit color (eine RGB-Hexadezimalzeichenfolge im Format #RRGGBB) wird die Farbe des Merkmals festgelegt.
  • Mit weight (eine Ganzzahl größer oder gleich null) wird die Stärke des Merkmals in Pixel angegeben. Ein hoher Wert kann dazu führen, dass die Darstellung an den Kachelrändern abgeschnitten wird.

Formatregeln werden in der von Ihnen angegebenen Reihenfolge angewandt. Sehen Sie davon ab, mehrere Vorgänge zu einem einzelnen Formatierungsvorgang zusammenzufassen. Definieren Sie stattdessen jeden Vorgang als separaten Eintrag im Formatarray.

Hinweis: Die Reihenfolge ist hierbei wichtig, da zwischen einigen Vorgängen keine Kommunikation erfolgt. Für Merkmale und/oder Elemente, die durch Formatierungsvorgänge geändert werden, sind normalerweise bereits Formate vorhanden. Mit diesen Vorgängen werden diese vorhandenen Formate, falls solche vorhanden sind, geändert.

HSL-Farbmodell (Hue, Saturation, Lightness bzw. Farbton, Sättigung, Helligkeit)



Formatierte Karten verwenden das Modell Farbton, Sättigung, Helligkeit (HSL) zur Angabe der Farbe bei Styler-Vorgängen. Hue gibt den Basisfarbton an, saturation die Intensität (Sättigung) dieser Farbe und lightness den relativen Weiß- oder Schwarzanteil, also die Helligkeit der daraus resultierenden Farbe.

Mit der Gammakorrektur wird die Sättigung über den Farbraum hinweg geändert, in der Regel zur Erhöhung oder Verringerung des Kontrasts. Darüber hinaus wird im HSL-Modell die Farbe innerhalb eines Koordinatensystems definiert. Mit hue wird dabei die Ausrichtung im Farbkreis festgelegt, „saturation“ und „lightness“ geben die Amplitude auf verschiedenen Achsen an. Farbtöne werden in einem RGB-Farbraum gemessen, der den regulären RGB-Farbräumen entspricht, außer dass Weiß- und Schwarzschattierungen fehlen.

Modell „Farbton, Sättigung und Helligkeit“

Für hue wird ein HTML-Hexadezimalwert zur Farbbestimmung verwendet, jedoch legt dieser Wert ausschließlich die Basisfarbe fest, d. h. die Ausrichtung im Farbkreis. Die Werte für Sättigung und Helligkeit werden separat als prozentuale Änderungen angegeben.

Zum Beispiel können Sie den Farbton für reines Grün als hue:0x00ff00 oder hue:0x000100 definieren. Die beiden Farbtöne sind identisch. Beide Werte ergeben im HSL-Farbmodell reines Grün.

RGB-Farbkreis

RGB-Farbtonwerte (hue), die zu gleichen Teilen aus Rot, Grün und Blau bestehen, geben keinen Farbton an, da keiner dieser Werte eine Ausrichtung im Koordinatensystem für Farbton, Sättigung und Helligkeit angibt. Beispiele sind „#000000“ (Schwarz), „#FFFFFF“ (Weiß) und alle reinen Grauschattierungen. Um Schwarz, Weiß oder Grau anzugeben, entfernen Sie zunächst die gesamte Sättigung (setzen Sie den Wert für (saturation auf -100), und passen Sie stattdessen die Helligkeit (lightness) an.

Bei der Bearbeitung vorhandener Merkmale, denen bereits ein Farbschema zugeordnet ist, führt das Ändern eines Wertes, z. B. des Farbtons (hue) nicht zu einer Veränderung der vorhandenen Sättigung (saturation) oder Helligkeit (lightness).

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API