Mapear esquema de cores
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
Para mapas do tipo roadmap
e terrain
, é possível definir o esquema de cores do mapa (escuro, claro ou configuração atual do sistema) usando google.maps.colorScheme
. A opção
colorScheme
só pode ser definida quando o mapa é inicializado. Definir essa
opção depois que o mapa é criado não tem efeito.
Roteiro
A imagem a seguir mostra os esquemas de cores do modo claro e do modo escuro para o tipo roadmap
.
Relevo
A imagem a seguir mostra os esquemas de cores do modo claro e do modo escuro para o tipo terrain
.
Por padrão, o mapa usa o modo claro. Ao criar o mapa, importe ColorScheme
e especifique o esquema de cores do mapa (LIGHT
, DARK
ou FOLLOW_SYSTEM
) nas opções do mapa, conforme mostrado aqui.
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);
Se você redefinir as opções depois que o mapa for instanciado, colorScheme
não terá efeito.
Para criar estilos claros e escuros personalizados para os tipos de mapa de roteiro, use a Estilização de mapas baseada na nuvem.
Exceto em caso de indicação contrária, o conteúdo desta página é licenciado de acordo com a Licença de atribuição 4.0 do Creative Commons, e as amostras de código são licenciadas de acordo com a Licença Apache 2.0. Para mais detalhes, consulte as políticas do site do Google Developers. Java é uma marca registrada da Oracle e/ou afiliadas.
Última atualização 2025-08-27 UTC.
[null,null,["Última atualização 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)."]]