Google Maps JavaScript API Version 3

Karten mit benutzerdefinierten Stilen

  1. Übersicht
  2. Stilsyntax
    1. Kartenfunktionen
    2. Styler
    3. Beispiel für ein Stil-Array
  3. Standardkartenstil ändern
  4. StyledMapType erstellen
  5. Der Assistent für Karten mit benutzerdefinierten Stilen

Übersicht

Mithilfe von Karten mit benutzerdefinierten Stilen können Sie die Darstellung der Standardbasiskarten von Google anpassen, indem Sie zum Beispiel Straßen, Parks und bebaute Flächen in einem anderen visuellen Stil angeben.

Es gibt zwei Möglichkeiten, Stile auf eine Karte anzuwenden:

  • Durch Festlegen der Eigenschaft .styles des MapOptions-Objekts der Karte. Bei diesem Ansatz wird der Stil der Standardkartentypen geändert. Basisbildmaterial in Gelände- und Satellitenansichten ist nicht betroffen, aber Straßen, Labels und andere Elemente berücksichtigen Stilregeln. Siehe Standardkartenstil ändern.

  • Durch Erstellen und Definieren eines StyledMapType und Anwenden dieses Typs auf die Karte. Dadurch wird ein neuer Kartentyp erstellt, der aus dem Kartentyp-Steuerelement ausgewählt werden kann. Siehe StyledMapType erstellen.

Beide Ansätze akzeptieren ein Array mit MapTypeStyles, die jeweils aus Selektoren und Stylern bestehen. Die Selektoren legen fest, für welche Kartenkomponenten der Stil gelten soll, während die Styler die visuelle Änderung dieser Elemente angeben.

Stilsyntax

Karten mit Stilen verwenden zwei Konzepte zum Anwenden von Farben und Änderungen auf eine Karte:

  • Kartenfunktionen sind die geografischen Elemente, die auf die Karte ausgerichtet werden können. Dazu zählen Straßen, Parks, Gewässer und mehr sowie deren Labels.
  • Styler sind Farb- und Sichtbarkeitseigenschaften, die auf Kartenfunktionen angewendet werden können. Sie definieren die Darstellungsfarbe über eine Kombination aus Farb- und Farbton- sowie Helligkeits-/Gammawerten.

Kartenmerkmale und Styler werden in einem Stil-Array kombiniert, das an das MapOptions-Objekt der Standardkarte oder an den StyledMapType-Konstruktor übergeben wird. Das Array hat die folgende Form:

var stylesArray = [
  {
    featureType: '',
    elementType: '',
    stylers: [
      {hue: ''},
      {saturation: ''},
      {lightness: ''},
      // etc...
    ]
  },
  {
    featureType: '',
    // etc...
  }
]

Seine Komponenten werden nachfolgend beschrieben.

Kartenfunktionen

Eine Karte besteht aus einer Gruppe von Funktionen wie zum Beispiel Straßen oder Parks, die mit einem MapTypeStyleFeatureType angegeben werden. Die Funktionstypen bilden eine Kategoriestruktur, wobei all der Stamm ist. Eine vollständige Liste mit Funktionen, die in einer Karte ausgewählt werden können, finden Sie in der Referenz zum Google Maps JavaScript API Version 3. Durch Angabe der Funktion als all werden alle Kartenelemente ausgewählt.

Funktionen werden mit der Syntax featureType: 'feature' angegeben.

Beispiel:

{
  featureType: "road"
}

Einige Kategorien von Funktionstypen enthalten Unterkategorien, die in einer Schreibweise mit trennendem Punkt angegeben werden, zum Beispiel landscape.natural oder road.local. Wenn die übergeordnete Funktion angegeben wird, zum Beispiel road, werden die auf diese Auswahl angewendeten Stile auch auf die ihr untergeordneten Elemente angewendet.

Des Weiteren enthalten einige Funktionen auf einer Karte normalerweise verschiedene Elemente. Beispielsweise besteht eine Straße nicht nur aus der auf der Karte gezeichneten Linie (Geometrie), sondern auch aus dem Text, der den Namen der Straße nennt (Labels). Elemente in Funktionen werden durch Festlegen einer Kategorie des Typs MapTypeStyleElementType ausgewählt. Die folgenden Elementtypen werden unterstützt:

  • all ist die Standardeinstellung und wählt alle Elemente dieser Funktion aus.
  • geometry wählt alle geometrischen Elemente dieser Funktion aus.
    • geometry.fill wählt nur die Füllung der Geometrie der Funktion aus.
    • geometry.stroke wählt nur die Linie der Geometrie der Funktion aus.
  • labels wählt nur Textlabels aus, die dieser Funktion zugewiesen sind.
    • labels.icon wählt nur das Symbol aus, das im Label der Funktion angezeigt wird.
    • labels.text wählt nur den Text des Labels aus.
    • labels.text.fill wählt nur die Füllung des Labels aus. Die Füllung eines Labels wird üblicherweise als farbige Kontur gerendert, die den Label-Text umgibt.
    • labels.text.stroke wählt nur die Linie des Label-Textes aus.

Mit der folgenden Angabe werden die Labels für alle lokalen Straßen ausgewählt:

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

Styler

Styler sind Formatierungsoptionen des Typs MapTypeStyler, die auf Kartenfunktionen angewendet werden. Die folgenden MapTypeStyler-Optionen werden unterstützt:

  • hue (eine RGB-Hexadezimalzeichenfolge) gibt die Grundfarbe an.
  • lightness ist ein Gleitkommawert zwischen -100 und 100 und gibt die Helligkeitsänderung des Elements in Prozent an. Negative Werte erhöhen die Dunkelheit (Schwarz liegt bei -100), während positive Werte die Helligkeit erhöhen (Weiß liegt bei +100).
  • saturation ist ein Gleitkommawert zwischen -100 und 100) und gibt die Intensitätsänderung der Grundfarbe in Prozent an, die auf das Element angewendet wird.
  • gamma ist ein Gleitkommawert zwischen 0.01 und 10.0, wobei 1.0 keine Korrektur anwendet, und zeigt das Ausmaß der Gammakorrektur am Element an. Gammawerte ändern die Helligkeit von Farbtönen auf nicht lineare Art und Weise, wobei Weiß- oder Schwarzwerte nicht betroffen sind. Gammawerte werden normalerweise zur Änderung des Kontrasts von mehreren Elementen verwendet. Sie können beispielsweise den Gammawert ändern, um den Kontrast zwischen Rändern und Innenflächen des Elements zu erhöhen oder zu verringern. Niedrige Gammawerte (< 1) erhöhen den Kontrast, während hohe Werte (> 1) den Kontrast verringern.
  • inverse_lightness (wenn true) kehrt die vorhandene Helligkeit einfach um. Dies ist zum Beispiel nützlich, um schnell zu einer dunkleren Karte mit weißem Text umzuschalten.
  • visibility (on, off oder simplified) gibt an, ob und wie die Elemente auf der Karte angezeigt werden. Eine simplified Sichtbarkeit entfernt einige Stilfunktionen von den betroffenen Funktionen. Straßen werden beispielsweise auf dünnere Linien vereinfacht, während Parks ohne Label-Text, aber mit Label-Symbol dargestellt werden.
  • color (eine RGB-Hexadezimalzeichenfolge) gibt die Farbe der Funktion an.
  • width (ein Ganzzahlenwert größer oder gleich null) gibt die Breite der Funktion in Pixeln an. Wird die Breite auf einen hohen Wert festgelegt, kann es nahe den Kachelrändern zur Beschneidung kommen.

Die Farbe einer Funktion kann entweder mit einem einzelnen color-Wert festgelegt oder durch eine Kombination aus hue, saturation und lightness geändert werden. Diese Eigenschaften stellen zwei unterschiedliche Methoden zur Farbdarstellung dar, können jedoch kombiniert werden. Beispiel: Sie können eine Farbe festlegen und dann die Sättigung und Helligkeit beim Anzeigen eines Dialogfeldes reduzieren. Weitere Informationen finden Sie in der Dokumentation zum HSL-Modell.

Styler-Regeln werden in der Reihenfolge angewendet, in der sie innerhalb des Arrays MapTypeStyler erscheinen. Kombinieren Sie nicht mehrere Vorgänge in einem einzelnen Styler-Vorgang. Definieren Sie stattdessen jeden Vorgang als separaten Eintrag im Style-Array. Die Reihenfolge ist wichtig, da manche Vorgänge nicht kommutativ sind. Funktionen bzw. Elemente, die durch Styler-Vorgänge geändert werden, verfügen in der Regel bereits über Stile. Die Vorgänge werden, falls vorhanden, auf diese Stile angewendet.

Das HSL-Modell

Karten mit Stilen verwenden zur Anzeige der Farbe in den Styler-Vorgängen das Hue, Saturation, Lightness (HSL)-Modell (Farbton, Sättigung, Helligkeit). Diese Vorgänge zur Definition von Farbe sind im Grafikdesign üblich. Farbton gibt die Grundfarbe an, Sättigung gibt die Intensität der Farbe an und Helligkeit gibt den relativen Anteil von Weiß oder Schwarz in der zugehörigen Farbe an.

Hinweis: hue verwendet zwar einen hexadezimalen HTML-Farbwert, dieser Wert wird jedoch nur zur Festlegung der Grundfarbe verwendet und nicht für Sättigung oder Helligkeit, die getrennt angegeben werden.

RGB-hue-Werte, die zu gleichen Teilen aus Rot, Grün und Blau bestehen, wie zum Beispiel "#000000" (schwarz) und "#FFFFFF" (weiß) und alle reinen Schattierungen von Grau, zeigen auf keinen Fall einen Farbton an, da keiner dieser Werte eine Ausrichtung im HSL-Koordinatenraum angibt. Zum Angeben von schwarz, weiß oder grau muss jegliche saturation entfernt (setzen Sie den Wert auf -100) und stattdessen die lightness angepasst werden.

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

Styler-Beispiele

So zeigen Sie eine Funktion hellblau an:

stylers: [
  { hue: "#00d4ff" },
  { saturation: 60 },
  { lightness: -20 },
  { gamma: 1.51 }
]

So zeigen Sie eine Funktion mit einem einzelnen RGB-Wert hellgrün an:

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

So entfernen Sie jegliche Farbe einer Funktion, unabhängig von deren Ausgangsfarbe:

stylers: [
  { saturation: -100 }
]

So blenden Sie eine Funktion vollständig aus:

stylers: [
  { visibility: "off" }
]

Beispiel für ein Stil-Array

Die Kartenfunktionsselektoren und die Styler-Regeln werden in einem Stil-Array kombiniert. Es können beliebig viele Funktionen auf ein einzelnes Array ausgerichtet werden.

Im folgenden Beispiel werden alle Kartenfunktionen in grau und danach die Straßengeometrie in blau geändert und alle Unternehmens-Labels vollständig ausgeblendet:

var styleArray = [
  {
    featureType: "all",
    stylers: [
      { saturation: -80 }
    ]
  },{
    featureType: "road.arterial",
    elementType: "geometry",
    stylers: [
      { hue: "#00ffee" },
      { saturation: 50 }
    ]
  },{
    featureType: "poi.business",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];

Standardkartenstil ändern

Legen Sie zum Ändern der Stile des Standardkartentyps (Änderungen an Labels und Straßen betreffen auch Gelände- und Satellitenkarten) das Stil-Array in den MapOptions der Karte entweder zum Zeitpunkt des Aufbaus oder durch Aufrufen von setOptions fest.

Im folgenden Beispiel wird die Sättigung aller Funktionen verringert und werden Labels auf Straßen deaktiviert.

var styles = [
  {
    stylers: [
      { hue: "#00ffe6" },
      { saturation: -20 }
    ]
  },{
    featureType: "road",
    elementType: "geometry",
    stylers: [
      { lightness: 100 },
      { visibility: "simplified" }
    ]
  },{
    featureType: "road",
    elementType: "labels",
    stylers: [
      { visibility: "off" }
    ]
  }
];

map.setOptions({styles: styles});

Informationen zu den Elementen der Karte, die mit Stilen versehen werden können, finden Sie unter Kartenfunktionen. Die anwendbaren Farben und Effekte finden Sie unter Styler.

StyledMapType erstellen

Durch Erstellen eines StyledMapType-Elements und Übergeben der Funktions- und Styler-Informationen an den Konstruktor können Sie einen neuen Kartentyp erstellen, auf den Stile angewendet werden sollen. Bei diesem Ansatz ist der Stil der Standardkartentypen nicht betroffen.

So erstellen Sie einen neuen Kartentyp:

  1. Erstellen Sie Ihr Array mit Stilen. Eine Anleitung finden Sie unter "Kartenfunktionen" und "Styler".
  2. Erstellen Sie ein neues google.maps.StyledMapType-Objekt, dem Sie das Array mit Stilen übergeben, sowie einen Namen für den neuen Kartentyp.
  3. Erstellen Sie Ihr Kartenobjekt und fügen Sie in die Kartenoptionen eine ID für den neuen Kartentyp in das Array mapTypeIds ein, das eine Eigenschaft des Objekts mapTypeControlOptions ist.
  4. Weisen Sie die ID im letzten Schritt der neuen Karte mit Stil zu.
  5. Legen Sie fest, dass die Karte den neuen Kartentyp verwendet.
function initialize() {

  // Create an array of styles.
  var styles = [
    {
      stylers: [
        { hue: "#00ffe6" },
        { saturation: -20 }
      ]
    },{
      featureType: "road",
      elementType: "geometry",
      stylers: [
        { lightness: 100 },
        { visibility: "simplified" }
      ]
    },{
      featureType: "road",
      elementType: "labels",
      stylers: [
        { visibility: "off" }
      ]
    }
  ];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var styledMap = new google.maps.StyledMapType(styles,
    {name: "Styled Map"});

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(55.6468, 37.581),
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    }
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);

  //Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');
}

Die resultierende Karte wird unten angezeigt. Beachten Sie die neue Schaltfläche rechts oben auf der Karte. Dabei handelt es sich um den im Beispielcode erstellten neuen Kartentyp.

Informationen zu den Elementen der Karte, die mit Stilen versehen werden können, finden Sie unter Kartenfunktionen. Die anwendbaren Farben und Effekte finden Sie unter Styler.

Der Assistent für Karten mit benutzerdefinierten Stilen

Die Erstellung von Stilen von Hand und das Testen Ihres Codes auf deren Wirkung ist potenziell zeitaufwändig. Sie können stattdessen den Assistenten für Karten mit benutzerdefinierten Stilen verwenden, um das JSON-Objekt für die Stile Ihrer Karte einzurichten. Mithilfe des Assistenten können Sie Funktionen und deren Elemente auswählen, Vorgänge auf diese Funktionen anwenden und die Stile im JSON-Objekt speichern, das Sie ausschneiden und in Ihre Anwendung kopieren können.

Authentifizierung erforderlich

Dazu müssen Sie in Google+ angemeldet sein.

Anmeldung...

Google Developers braucht hierfür Ihre Erlaubnis.