Kartenfarbschema
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Für Karten vom Typ roadmap und terrain können Sie das Farbschema der Karte (dunkel, hell oder aktuelle Systemeinstellung) mit google.maps.colorScheme festlegen. Die Option colorScheme kann nur beim Initialisieren der Karte festgelegt werden. Wenn Sie diese Option nach dem Erstellen der Karte festlegen, hat das keine Auswirkungen.
Roadmap
Das folgende Bild zeigt die Farbschemas für den hellen und den dunklen Modus für den Typ roadmap.
Gelände
Das folgende Bild zeigt die Farbschemas für den hellen und den dunklen Modus für den Typ terrain.
Standardmäßig wird die Karte im hellen Modus angezeigt. Importieren Sie beim Erstellen der Karte ColorScheme und geben Sie das Farbschema der Karte (LIGHT, DARK oder FOLLOW_SYSTEM) in den Kartenoptionen an, wie hier gezeigt.
const {ColorScheme} = await google.maps.importLibrary("core")
const mapOptions = {
center: { lat: -34.397, lng: 150.644 },
zoom: 8,
colorScheme: ColorScheme.DARK,
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
Wenn Sie die Optionen zurücksetzen, nachdem die Karte instanziiert wurde, hat colorScheme keine Auswirkungen.
Wenn Sie benutzerdefinierte helle und dunkle Stile für Ihre Straßenkarten erstellen möchten, verwenden Sie das cloudbasierte Gestalten von Karteninhalten.
Sofern nicht anders angegeben, sind die Inhalte dieser Seite unter der Creative Commons Attribution 4.0 License und Codebeispiele unter der Apache 2.0 License lizenziert. Weitere Informationen finden Sie in den Websiterichtlinien von Google Developers. Java ist eine eingetragene Marke von Oracle und/oder seinen Partnern.
Zuletzt aktualisiert: 2025-08-27 (UTC).
[null,null,["Zuletzt aktualisiert: 2025-08-27 (UTC)."],[[["\u003cp\u003eRoadmap and terrain map types allow customization of color schemes (light, dark, or system default) using \u003ccode\u003egoogle.maps.colorScheme\u003c/code\u003e.\u003c/p\u003e\n"],["\u003cp\u003eThe \u003ccode\u003ecolorScheme\u003c/code\u003e option must be set during map initialization and cannot be changed afterward.\u003c/p\u003e\n"],["\u003cp\u003eBy default, maps use light mode; to change, import \u003ccode\u003eColorScheme\u003c/code\u003e and specify the desired scheme (LIGHT, DARK, or FOLLOW_SYSTEM) within map options.\u003c/p\u003e\n"],["\u003cp\u003eCustom styles using Map IDs are only compatible with the light color scheme for roadmap map types.\u003c/p\u003e\n"]]],[],null,["# Map color scheme\n\nFor maps of type `roadmap` and `terrain`, you can set the map color scheme\n(dark, light, or current system setting) by using `google.maps.colorScheme`. The\n`colorScheme` option can only be set when the map is initialized; setting this\noption after the map is created will have no effect. \n\n### Roadmap\n\nThe following image shows the light mode and dark mode color schemes for the\n`roadmap` type.\n\n### Terrain\n\nThe following image shows the light mode and dark mode color schemes for the\n`terrain` type.\n\nBy default, the map uses light mode. When creating the map, import `ColorScheme`\nand specify the map color scheme (`LIGHT`, `DARK`, or `FOLLOW_SYSTEM`) in\nmap options, as shown here. \n\n const {ColorScheme} = await google.maps.importLibrary(\"core\")\n\n const mapOptions = {\n center: { lat: -34.397, lng: 150.644 },\n zoom: 8,\n colorScheme: ColorScheme.DARK,\n }\n map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);\n\nIf you reset the options after the map is instantiated, `colorScheme` has no\neffect.\n\nTo create custom light styles and dark styles for your roadmap map types, use\n[cloud-based maps styling](/maps/documentation/javascript/cloud-customization)."]]
