Esquema de colores del mapa
Organiza tus páginas con colecciones
Guarda y categoriza el contenido según tus preferencias.
En el caso de los mapas de tipo roadmap
y terrain
, puedes establecer el esquema de color del mapa (oscuro, claro o configuración actual del sistema) con google.maps.colorScheme
. La opción colorScheme
solo se puede establecer cuando se inicializa el mapa. Si se establece esta opción después de crear el mapa, no tendrá ningún efecto.
Hoja de ruta
En la siguiente imagen, se muestran los esquemas de color del modo claro y el modo oscuro para el tipo roadmap
.
Relieve
En la siguiente imagen, se muestran los esquemas de color del modo claro y el modo oscuro para el tipo terrain
.
De forma predeterminada, el mapa usa el modo claro. Cuando crees el mapa, importa ColorScheme
y especifica el esquema de color del mapa (LIGHT
, DARK
o FOLLOW_SYSTEM
) en las opciones del mapa, como se muestra aquí.
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 restableces las opciones después de crear una instancia del mapa, colorScheme
no tendrá ningún efecto.
Para crear diseños claros y oscuros personalizados para tus tipos de mapas de hoja de ruta, usa el diseño de mapas basado en Cloud.
Salvo que se indique lo contrario, el contenido de esta página está sujeto a la licencia Atribución 4.0 de Creative Commons, y los ejemplos de código están sujetos a la licencia Apache 2.0. Para obtener más información, consulta las políticas del sitio de Google Developers. Java es una marca registrada de Oracle o sus afiliados.
Última actualización: 2025-08-27 (UTC)
[null,null,["Última actualización: 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)."]]