Stilreferenz für Maps SDK for iOS

Plattform auswählen: Android iOS JavaScript

Mit Stiloptionen können Sie die Standard-Google-Kartenstile individuell gestalten, indem Sie die Darstellung von Merkmalen wie Straßen, Parks, Unternehmen und anderen POIs ändern. Sie können die Merkmale aber nicht nur ändern, sondern sie auch ganz ausblenden. Das heißt, dass Sie bestimmte Komponenten der Karte hervorheben bzw. dafür sorgen können, dass die Karte zum Design der sie umgebenden Seite passt.

Wenn Sie einen Stil schnell und einfach für mehrere Apps ändern möchten, bieten sich die Maps-Anpassungsfunktionen an, die in der Google Cloud Console verfügbar sind. Sie müssen eine Karten-ID erstellen und hinzufügen, um diese Funktionen zu nutzen. Wir empfehlen, die Maps-Anpassungsfunktionen und hartcodierte Stile nicht gemeinsam in einer App zu verwenden. Das könnte in Zukunft zu Konflikten führen.

Beispiele

Mit der nachfolgenden JSON-Stildeklaration werden alle Kartenmerkmale in Grau dargestellt. Dann werden die Ein- und Ausfallstraßen blau eingefärbt und die Landschaftslabels 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-Stildeklaration besteht aus den folgenden Elementen:

• featureType (optional) gibt die für diese Stiländerung auszuwählenden Merkmale an. Merkmale sind geografische Charakteristika auf der Karte, z. B. 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 Labels 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 angewendet 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 einen Stil anzugeben, müssen Sie featureType- und elementType-Selektoren und stylers in einem Stilarray zusammenfassen. In einem Array lassen sich beliebige Merkmale zusammenfassen. Allerdings können Sie nur eine begrenzte Anzahl von Stilen auf einmal anwenden. Wenn Ihr Stilarray die maximale Zeichenzahl überschreitet, wird kein Stil angewendet.

Auf dieser Seite finden Sie noch weitere Informationen zu Merkmalen, Elementen und Stylern.

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 kein Merkmal angeben ist, werden alle Merkmale ausgewählt. Wenn Sie das Merkmal all angeben, hat das denselben Effekt.

Zu einigen Merkmalen gibt es untergeordnete Merkmale, die nach einem Punkt notiert werden. Beispiel: landscape.natural oder road.local. Wenn Sie nur das übergeordnete Merkmal angeben, z. B. road, gelten die für das übergeordnete Merkmal angegebenen Stile auch für alle untergeordneten Merkmale, zum Beispiel road.local und road.highway.

Es kann sein, dass einige Elemente von übergeordneten Merkmalen nicht in allen ihnen untergeordneten Merkmalen enthalten sind.

Die folgenden Merkmale sind verfügbar:

• all (Standardeinstellung): Zum Auswählen aller Merkmale.
• administrative zum Auswählen aller Bundesländer. Dies betrifft nur die Beschriftungen der Bundesländer, nicht die geografischen Grenzen oder die Füllbereiche.
  • administrative.country zum Auswählen von Ländern
  • administrative.land_parcel zum Auswählen von Flurstücken
  • administrative.locality zum Auswählen von Orten
  • administrative.neighborhood zum Auswählen von Stadtteilen
  • administrative.province zum Auswählen von Provinzen
• landscape zum Auswählen aller Landschaften
  • landscape.man_made zum Auswählen von Merkmalen, die von Menschen erschaffen wurden, etwa Gebäuden und anderen Bauwerken
  • landscape.natural zum Auswählen von Landschaftsmerkmalen wie Bergen, Seen, Wüsten und Gletschern
  • landscape.natural.landcover zum Auswählen von Landschaftsmerkmalen, d. h. des physischen Materials, das die Erdoberfläche bedeckt, z. B. Wälder, Graslandschaften, Feuchtgebiete und Grundflächen
  • landscape.natural.terrain zum Auswählen von Geländemerkmalen einer Landoberfläche, z. B. Höhe, Gefälle und Ausrichtung
• poi zum Auswählen aller POIs
  • poi.attraction zum Auswählen von Touristenattraktionen
  • poi.business zum Auswählen von Unternehmen
  • poi.government zum Auswählen von staatlichen Gebäuden
  • poi.medical zum Auswählen von Einrichtungen zur Notfallversorgung und -hilfe, etwa Krankenhäuser, Apotheken, Polizei oder Ärzte
  • poi.park zum Auswählen von Parks
  • poi.place_of_worship zum Auswählen von Andachtsstätten wie Kirchen, Tempeln und Moscheen
  • poi.school zum Auswählen von Schulen
  • poi.sports_complex zum Auswählen von Sportanlagen
• road zum Auswählen aller Straßen
  • road.arterial zum Auswählen von Hauptverkehrsstraßen
  • road.highway zum Auswählen von Bundesstraßen
  • road.highway.controlled_access zum Auswählen von Autobahnen
  • road.local zum Auswählen lokaler Straßen
• transit zum Auswählen aller Haltestellen und Linien öffentlicher Verkehrsmittel
  • transit.line zum Auswählen von Linien öffentlicher Verkehrsmittel
  • transit.station zum Auswählen aller Haltestellen öffentlicher Verkehrsmittel
  • transit.station.airport zum Auswählen von Flughäfen
  • transit.station.bus zum Auswählen von Bushaltestellen
  • transit.station.rail zum Auswählen von Bahnhöfen
• water zum Auswählen von Gewässern

elementType

Mit dem folgenden JSON-Snippet werden die Labels 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 (Label).

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

• all (Standard): Wählt alle Elemente des angegebenen Merkmals aus.
• geometry zum Auswählen aller geometrischen Elemente des angegebenen Merkmals
  • Mit geometry.fill wird nur die Füllung der Geometrie des Elements ausgewählt.
  • Mit geometry.stroke wird nur der Strich der Geometrie des Elements ausgewählt.
• labels zum Auswählen der Textlabels, die mit dem angegebenen Feature verknüpft sind.
  • Mit labels.icon wird nur das Symbol ausgewählt, das im Label des Merkmals angezeigt wird.
  • Mit labels.text wird nur der Text des Labels ausgewählt.
  • Mit labels.text.fill wird nur die Füllung des Labels ausgewählt. Der Füllbereich eines Labels wird in der Regel als farbiger Rahmen um den Labeltext dargestellt.
  • Mit labels.text.stroke wird nur der Strich des Labeltexts ausgewählt.

stylers

Styler sind Stiloptionen, die auf Kartenmerkmale und -elemente angewendet 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. Dies führt zu einer Darstellung des Merkmals in Graustufen:

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

Durch dieses Snippet wird ein Merkmal vollständig ausgeblendet:

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

Die folgenden Stiloptionen werden unterstützt:

• hue (ein hexadezimaler RGB-String des Formats #RRGGBB) gibt die Grundfarbe an.

  Hinweis: Mit dieser Option wird der Farbton festgelegt, während die Sättigung und die Helligkeit weiterhin der Festlegung im Standard-Google-Stil entsprechen (oder in anderen Stiloptionen, die Sie für die Karte definieren). Die resultierende Farbe hängt vom Stil der Basiskarte ab. Wenn Google Änderungen am Basiskartenstil vornimmt, haben diese Änderungen Auswirkungen auf die mit hue formatierten Merkmale Ihrer Karte. Verwenden Sie daher wenn möglich den Absolut-Styler color.

• lightness (ein Gleitkommawert zwischen -100 und 100) gibt die Helligkeitsänderung des Elements in Prozent an. Negative Werte führen zu einem dunkleren Ergebnis (wobei -100 Schwarz ergibt), positive Werte sorgen für mehr Helligkeit (wobei +100 Weiß ergibt).

  Mit dieser Option wird die Helligkeit festgelegt, während die Sättigung und der Farbton weiterhin der Festlegung im Standard-Google-Stil entsprechen (oder in anderen Stiloptionen, die Sie für die Karte definieren). Die resultierende Farbe hängt vom Stil der Basiskarte ab. Wenn Google Änderungen am Basiskartenstil vornimmt, haben diese Änderungen Auswirkungen auf die mit lightness formatierten Merkmale Ihrer Karte. Verwenden Sie daher wenn möglich den Absolut-Styler color.

• saturation (ein Gleitkommawert zwischen -100 und 100) gibt die Intensitätsänderung der Grundfarbe in Prozent an, die auf das Element angewendet wird.

  Hinweis: Mit dieser Option wird die Sättigung festgelegt, während der Farbton und die Helligkeit weiterhin der Festlegung im Standard-Google-Stil entsprechen (oder in anderen Stiloptionen, die Sie für die Karte definieren). Die resultierende Farbe hängt vom Stil der Basiskarte ab. Änderungen, die Google am Basiskartenstil vornimmt, wirken sich auf die mit saturation formatierten Merkmale Ihrer Karte aus. Verwenden Sie daher wenn möglich den Absolut-Styler color.

• gamma (ein Gleitkommawert zwischen 0.01 und 10.0, wobei mit 1.0 keine Korrektur angewendet wird) gibt die Stärke der Gammakorrektur an, die auf das Element angewendet wird. Mit Gammakorrekturen werden nicht lineare 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 Innenbereich von Elementen zu erhöhen oder zu verringern.

  Mit dieser Option wird die Helligkeit relativ zum Standard-Google-Stil anhand einer Gammakurve variiert. Wenn Google Änderungen am Basiskartenstil vornimmt, wirken sich diese Änderungen auf die mit gamma formatierten Merkmale Ihrer Karte aus. Verwenden Sie daher wenn möglich den Absolut-Styler color.

• invert_lightness (wenn true) invertiert die vorhandene Helligkeit. Das ist z. B. hilfreich, um schnell zu einer dunkleren Karte mit weißem Text zu wechseln.

  Hinweis: Mit dieser Option wird der Standard-Google-Stil einfach invertiert. Wenn Google Änderungen am Basiskartenstil vornimmt, haben diese Änderungen Auswirkungen auf die mit invert_lightness formatierten Merkmale Ihrer Karte. Verwenden Sie daher wenn möglich den Absolut-Styler color.

• visibility (on, off oder simplified) gibt an, ob und wie die Elemente auf der Karte angezeigt werden. Bei der Sichtbarkeit simplified werden einige Stilelemente aus den betroffenen Merkmalen entfernt. Straßen werden zum Beispiel zu dünneren Linien ohne Konturen vereinfacht, während Parks ihren Labeltext verlieren, aber das Labelsymbol behalten.
• Mit color (ein hexadezimaler RGB-String des Stils #RRGGBB) wird die Farbe eines Elements festgelegt.
• Mit weight (eine Ganzzahl größer oder gleich null) wird die Stärke des Merkmals in Pixeln angegeben. Ein hoher Wert kann dazu führen, dass die Darstellung an den Kachelrändern abgeschnitten wird.

Stilregeln werden in der von Ihnen angegebenen Reihenfolge angewendet. Vermeiden Sie es, mehrere Vorgänge zu einem einzigen Stiländerungs-Vorgang zu kombinieren. Definieren Sie stattdessen jeden Vorgang als separaten Eintrag im Stilarray.

Hinweis: Die Reihenfolge ist hierbei wichtig, weil einige Vorgänge nicht vertauscht werden dürfen. Für Merkmale und/oder Elemente, die durch Vorgänge geändert werden, sind normalerweise bereits Stile vorhanden. Mit diesen Vorgängen werden diese vorhandenen Stile, falls vorhanden, geändert.

HSL-Farbmodell

Hinweis: Der Effekt der Einstellungen für Farbton, Sättigung, Helligkeit und Gamma hängt vom Stil der Basiskarte ab. Wenn Google Änderungen am Basiskartenstil vornimmt, haben diese Änderungen Auswirkungen auf die mit diesen Optionen formatierten Merkmale Ihrer Karte. Verwenden Sie daher wenn möglich den Absolut-Styler color.

Für Karten mit benutzerdefinierten Stilen wird das HSL-Modell (Hue, Saturation, Lightness; Farbton, Sättigung, Helligkeit) zur Darstellung von Farben in Styler-Vorgängen verwendet. Farbton gibt die Grundfarbe an, Sättigung die Intensität der Farbe und Helligkeit den relativen Anteil von Weiß oder Schwarz in der zugehörigen Farbe.

Mit der Gammakorrektur wird die Sättigung über den Farbraum hinweg geändert, in der Regel zum Erhöhen oder Verringern des Kontrasts. Außerdem definiert das HSL-Modell die Farbe in einem Koordinatenbereich, wobei hue die Ausrichtung innerhalb eines Farbrads angibt, während Sättigung und Helligkeit Werte entlang verschiedener Achsen angeben. Farbtöne werden in einem RGB-Farbraum gemessen, der den regulären RGB-Farbräumen entspricht, außer dass Weiß- und Schwarzschattierungen fehlen.

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

Beispielsweise 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.

Ein RGB-Farbrad

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. Zum Angeben von Schwarz, Weiß oder Grau muss saturation entfernt werden, indem Sie den Wert auf -100 setzen. Passen Sie dann den lightness-Wert an.

Außerdem werden beim Ändern vorhandener Funktionen, die bereits ein Farbschema haben, durch das Ändern eines Werts wie zum Beispiel hue die vorhandenen saturation- oder lightness-Werte nicht geändert.