Es kann losgehen!

Bevor Sie mit der Entwicklung beginnen, lesen Sie bitte unsere Entwicklerdokumentation.

Die Google Static Maps 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 Static Maps API aktivieren
  3. Zugehörige Schlüssel erstellen
Weiter

Formatierte Karten

Passen Sie Darstellung der Google-Standardkarten durch Anwenden eigener Formate an, wenn Sie die Google Static Maps API verwenden. Sie können die visuelle Darstellung von Merkmalen wie Straßen, Parks, bebauten Flächen und anderen Points of Interest ändern. Ändern Sie ihre Farbe oder ihr Format, um bestimmte Inhalte hervorzuheben, Inhalte in der Umgebung auf der Seite zu ergänzen oder Merkmale vollständig auszublenden.

Beispiele

Im folgenden Beispiel wird eine Karte von Brooklyn, USA, mit einer Formatierung abgebildet, die die örtlichen Straßen in Hellgrün hervorhebt und die Wohngebiete in Schwarz darstellt. Darüber hinaus wird die Helligkeit der Beschriftungen umgekehrt, sodass sie sich besser vom dunklen Hintergrund abheben. Beachten Sie, dass bei diesem Beispiel URL-Codierung verwendet wird:

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15&center=Brooklyn&style=feature:road.local%7Celement:geometry%7Ccolor:0x00ff00&style=feature:landscape%7Celement:geometry.fill%7Ccolor:0x000000&style=element:labels%7Cinvert_lightness:true&style=feature:road.arterial%7Celement:labels%7Cinvert_lightness:false&key=YOUR_API_KEY

Im folgenden Beispiel erfolgt durch Formatierungsvorgänge und Vereinfachungen eine Annäherung an das Erscheinungsbild eines US-Straßenatlas:

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12&center=Chicago&format=png&style=feature:road.highway%7Celement:geometry%7Cvisibility:simplified%7Ccolor:0xc280e9&style=feature:transit.line%7Cvisibility:simplified%7Ccolor:0xbababa&style=feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff&key=YOUR_API_KEY

Formatsyntax

Für die Erstellung einer Karte mit benutzerdefiniertem Format nehmen Sie mindestens einen Parameter style in die Anforderung-URL auf.

Jede Deklaration von style kann die folgenden durch senkrechte Striche (|) getrennten Argumente enthalten:

  • feature (optional) gibt die für diese Formatänderung auszuwählenden Merkmale an. Zu den Merkmalen gehören Elemente auf der Karte, z. B. Straßen, Parks oder andere Points of Interest. Wenn kein Argument vom Typ feature vorhanden ist, wird das angegebene Format auf alle Merkmale angewendet.
  • element (optional) gibt die Elemente des angegebenen Merkmals an, die für diese Formatänderung ausgewählt werden sollen. Elemente sind Charakteristika eines Merkmals, z. B. Geometrie oder Beschriftungen. Wenn kein Argument vom Typ element vorhanden ist, wird das Format auf alle Elemente des angegebenen Merkmals angewendet.
  • Ein Gruppe von Formatregeln (erforderlich), die auf die angegebenen Merkmale und Elemente angewendet werden. Die API wendet die Regeln in der Reihenfolge an, in der sie in der Deklaration style angezeigt werden. Innerhalb der normalen Beschränkungen für die URL-Länge der Google Static Maps API können Sie beliebig viele Regeln hinzufügen.

Hinweis: Die Deklaration style muss die obigen Argumente in der angegebenen Reihenfolge enthalten. Das folgende Beispiel gibt die korrekte Syntax für die Merkmal- und Elementauswahl mit zwei Regeln an:

style=feature:myFeatureArgument|element:myElementArgument|myRule1:myRule1Argument|myRule2:myRule2Argument

Merkmale

Die folgende Deklaration style wendet Farben auf alle Straßen auf der Karte an:

style=feature:road|color:0xffffff

Nachfolgend sehen Sie eine allgemeine Merkmalauswahl:

  • feature:all (Standard) wählt alle Merkmale der Karte aus.
  • feature:road wählt alle Straßen auf der Karte aus.
  • feature:road.local wählt alle örtlichen Straßen aus.


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.

Elemente

Die folgende Deklaration style wendet Farben auf die Beschriftungen aller örtlichen Straßen an:

style=feature:road.local|element:labels|color:0xffffff


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.

Formatregeln

Bei Formatregeln handelt es sich um Formatierungsoptionen, die auf die in den einzelnen Deklarationen style angegebenen Merkmale und Elemente angewendet werden.

Mit der folgende Deklaration style werden zwei Formatregeln auf die Straßen auf der Karte angewendet. Durch die erste Regel wird eine Farbe auf die Straßen angewendet. Mit der zweiten Regel wird die Anzeige der Straßen so vereinfacht, dass sie als dünne Linien ohne Rahmen dargestellt werden:

style=feature:road|color:0xffffff|visibility:simplified

Jede Deklaration style muss einen oder mehrere Vorgänge enthalten, die durch einen senkrechten Strich (|) getrennt werden. In jedem Vorgang wird der Argumentwert per Doppelpunkt (:) angegeben und alle Vorgänge werden in der Reihenfolge ihrer Angabe auf die Auswahl angewendet.



Die folgenden Formatoptionen werden unterstützt:

  • Mit hue (eine RGB-Hexadezimalzeichenfolge im Format 0xRRGGBB) 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 0xRRGGBB) 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 Static Maps API