Jeu de couleurs de la carte
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
Pour les cartes de type roadmap et terrain, vous pouvez définir le jeu de couleurs de la carte (sombre, clair ou paramètre système actuel) à l'aide de google.maps.colorScheme. L'option colorScheme ne peut être définie que lorsque la carte est initialisée. Si vous la définissez après la création de la carte, cela n'aura aucun effet.
Feuille de route
L'image suivante montre les schémas de couleurs du mode clair et du mode sombre pour le type roadmap.
Relief
L'image suivante montre les schémas de couleurs du mode clair et du mode sombre pour le type terrain.
Par défaut, la carte utilise le mode clair. Lorsque vous créez la carte, importez ColorScheme et spécifiez le jeu de couleurs de la carte (LIGHT, DARK ou FOLLOW_SYSTEM) dans les options de la carte, comme indiqué ici.
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);
Si vous réinitialisez les options après l'instanciation de la carte, colorScheme n'a aucun effet.
Pour créer des styles clairs et sombres personnalisés pour vos types de cartes routières, utilisez la personnalisation de cartes dans le cloud.
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/08/27 (UTC).
[null,null,["Dernière mise à jour le 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)."]]
