Schritt 1: Kartenstil erstellen und veröffentlichen
Funktionen zum cloudbasierten Gestalten von Karteninhalten öffnen
Rufen Sie die Google Cloud Console auf und wählen Sie Kartenstile aus. Wählen Sie ein Projekt aus oder erstellen Sie eines.
Wählen Sie Stil erstellen aus.
Wählen Sie unten im Dialogfeld Anpassen aus.
Straßennetz gestalten
Maximieren Sie unter Kartenelemente die Option Infrastruktur und wählen Sie dann Straßennetz aus.
Wählen Sie im Steuerfeld, das auf der rechten Seite eingeblendet wird, im Bereich Polylinie unter Füllfarbe das Farbfeld aus.
Wählen Sie eine kräftige Farbe aus. Wenn Sie die Farbe ändern, wird automatisch ein Häkchen in das Kästchen neben Füllfarbe gesetzt.
Legen Sie unter Strichbreite die Strichbreite auf „5 px“ fest.
Zoomen Sie auf der Karte heran und wieder heraus, um zu sehen, wie sich die vorgenommenen Änderungen auswirken. Da Sie ein Kartenelement ausgewählt haben, das sich in der Hierarchie relativ weit oben befindet, werden Ihre Änderungen auf alle untergeordneten Straßentypen angewendet.
Kartenstil speichern und veröffentlichen
Wählen Sie rechts oben Speichern aus.
Geben Sie unter Kartenstil speichern und veröffentlichen einen Namen und optional eine Beschreibung für Ihren Kartenstil ein.
Klicken Sie auf Speichern. Ihr Kartenstil wird nun gespeichert und veröffentlicht.
Schritt 2: Karten-ID erstellen und mit dem Kartenstil verknüpfen
Mithilfe einer Karten-ID können Sie Ihren Kartenstil jeweils konsistent in Apps und auf Websites verwenden. Wenn Sie Änderungen an einem Kartenstil vornehmen, der mit einer Karten-ID verknüpft ist, werden die Änderungen bei der Veröffentlichung automatisch angewendet. Es sind also keine Software- oder App-Updates erforderlich.
Karten-ID erstellen
Wählen Sie in der Google Cloud Console Kartenverwaltung aus.
Wählen Sie oben Karten-ID erstellen aus.
Geben Sie einen Namen und optional eine Beschreibung für die Karten-ID ein.
Wählen Sie einen Kartentyp für die Karten-ID aus, je nachdem, wo Sie Ihren Kartenstil verwenden möchten.
Klicken Sie unten auf der Seite auf Speichern. Ihre Karten-ID ist nun erstellt.
Karten-ID mit dem Kartenstil verknüpfen
Wählen Sie unter Kartenstil neben Hell die Option Stil ändern aus.
Wählen Sie unter Hellen Stil ändern den Kartenstil aus, der für den hellen Modus in Ihren Apps verwendet werden soll, und klicken Sie auf Fertig.
Wiederholen Sie den Vorgang, indem Sie neben Dunkel die Option Stil ändern auswählen und einen Kartenstil für den dunklen Modus festlegen.
Klicken Sie auf Speichern. Ihre Karten-ID ist jetzt mit den Kartenstilen verknüpft.
Schritt 3: Karten-ID zu Apps oder Websites hinzufügen
Nachdem Sie eine Karten-ID mit einem veröffentlichten Kartenstil verknüpft haben, können Sie sie Ihren Apps oder Websites hinzufügen und testen, ob alles wie gewünscht funktioniert.
Stil ändern: Wenn Sie Änderungen am Kartenstil vornehmen und veröffentlichen, werden diese automatisch in Ihren Apps bzw. auf Ihren Websites übernommen. Falls Sie Änderungen zuerst testen möchten, lesen Sie den Artikel Stiländerungen testen. Dort finden Sie hierzu weitere Informationen.
Hierarchie von Kartenelementen nutzen, um beim Gestalten der Karte effizient vorzugehen:
Wenn Sie z. B. das übergeordnete Kartenelement Natürlich > Land gestalten, werden Ihre Änderungen auf alle untergeordneten Elemente angewendet. Danach können Sie entscheiden, welche einzelnen untergeordneten Kartenelemente Sie weiter anpassen möchten.
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2025-08-27 (UTC)."],[],[],null,["# Tutorial - Highlight a road network\n\nSelect platform: [Android](/maps/documentation/android-sdk/cloud-customization/tut \"View this page for the Android platform docs.\") [iOS](/maps/documentation/ios-sdk/cloud-customization/tut \"View this page for the iOS platform docs.\") [JavaScript](/maps/documentation/javascript/cloud-customization/tut \"View this page for the JavaScript platform docs.\") [Web Service](/maps/documentation/maps-static/cloud-customization/tut \"View this page for the Web Service platform docs.\")\n\n\u003cbr /\u003e\n\n| To use cloud-based maps styling on Android, you must use the latest renderer for Maps SDK for Android. [Follow these instructions](/maps/documentation/android-sdk/renderer).\n\nThis tutorial walks you through the steps to create and use a map style that\nhighlights the road network:\n\n1. **[Create and publish a map style](#tut1)** so it's available to use.\n\n2. **[Create and connect a map ID](#tut2)** that lets you use your style in\n apps and websites.\n\n3. **[Add the map ID to your apps and websites](#tut3)** so your apps use\n your map style.\n\nStep 1: Create and publish a map style\n--------------------------------------\n\n### Open cloud-based maps styling\n\n1. Go to the Google Cloud console, and select [**Map Styles**](https://console.cloud.google.com/project/_/google/maps-apis/studio/styles). Select or create a project, if needed.\n\n2. Select **Create Style**.\n\n3. At the bottom of the dialog, select **Customize**.\n\n### Style the Road network\n\n1. Under **Map Features** , expand **Infrastructure** , then select **Road\n network**.\n\n2. On the panel that pops up on the right, under **Polyline** ,\n then **Fill color**, select the color box.\n\n3. Choose a bright color. Changing the color automatically checks\n the **Fill color** box.\n\n | **Note:** A solid dot appears next to the map feature to indicate it has a custom style.\n4. Under **Stroke width**, set the stroke width to 5px.\n\n5. On the map, zoom in and out to see the effect of your changes. Because\n you selected a map feature that is relatively high in the hierarchy,\n all road types underneath it have inherited your changes.\n\n### Save and publish your map style\n\n1. At the top right, select **Save**.\n\n2. In **Save and publish map style**, enter a name and, optionally, a\n description for your map style.\n\n3. Select **Save**. Your map style is saved and published.\n\n| **Note:** The first time you save a map style, it is published automatically since it's the first version. When you subsequently update a map style, you can save changes as drafts as you go, and then publish when you're finished and want the style updated.\n\nStep 2: Create and connect a map ID\n-----------------------------------\n\nA map ID lets you use your map style on apps and websites. If you make changes\nto the map style associated with a map ID, your style changes\ngo live when you publish, so no software or app updates are needed.\n\n### Create a map ID\n\n1. In the Google Cloud console, select **Map Management**.\n\n2. At the top, select **Create map ID**.\n\n3. Add a name for your map ID, and optionally, a description.\n\n4. Select the map type for the map ID, depending on where you want to use your\n map style.\n\n | **Note:** If you want to use your map style for different types of applications or websites, create a new map ID for each type, and then connect them all to the same map style.\n5. At the bottom of the page, select **Save**. Your map ID is created.\n\n### Connect the map ID to your map style\n\n1. Under **Map style** , select **Change style** next to **Light**.\n\n2. Under **Change light style** , choose what map style to\n use for light mode in your apps, and select **Done**.\n\n3. Repeat by selecting **Change Style** next to **Dark** and select a dark\n mode map style.\n\n | **Note:** If you don't select a dark style, or have not created any dark mode map styles, you can select the Google default dark map style.\n4. Select **Save**. Your map ID is now associated with your map styles.\n\nStep 3: Add the map ID to your apps or websites\n-----------------------------------------------\n\nNow that you have a map ID that is associated with a published map style,\nyou can add it to your apps or websites and test to make sure it functions\nas expected.\n\nFor more information about adding a map ID, see\n[Add the map ID to your map](/maps/documentation/get-map-id#add-a-map-id-to-your-app).\n\nWhat's next\n-----------\n\nHere are some things you can try next:\n\n- **Update a style** . Make changes to your map style and publish it,\n and see the changes show up automatically in your apps and websites. If you\n want to test your changes before they go live, see\n [Test map style updates](/maps/documentation/android-sdk/cloud-customization/test-style-updates).\n\n- **Use the map feature hierarchy to efficiently get the styles you want** .\n For example, you can style the high-level map feature **Natural\\\u003eLand**,\n and all of the land map features under it inherit the styling. You can\n then do custom styling on just the child map features that you want to\n be different."]]
