Os mapas estilizados permitem personalizar a apresentação dos mapas básicos do Google Maps, alterando a exibição visual de elementos como vias, parques e áreas construídas.
Dica: aplique estilos para evitar que estabelecimentos, pontos de interesse e outros recursos apareçam no mapa. Consulte o exemplo de Como ocultar recursos do mapa usando estilo.
Exemplo
Os exemplos a seguir definem o estilo do mapa no modo noturno, usando cores úteis para situações como fornecer rotas no escuro.
function initMap() { // Styles a map in night mode. var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 40.674, lng: -73.945}, zoom: 12, styles: [ {elementType: 'geometry', stylers: [{color: '#242f3e'}]}, {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]}, {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]}, { featureType: 'administrative.locality', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}] }, { featureType: 'poi', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}] }, { featureType: 'poi.park', elementType: 'geometry', stylers: [{color: '#263c3f'}] }, { featureType: 'poi.park', elementType: 'labels.text.fill', stylers: [{color: '#6b9a76'}] }, { featureType: 'road', elementType: 'geometry', stylers: [{color: '#38414e'}] }, { featureType: 'road', elementType: 'geometry.stroke', stylers: [{color: '#212a37'}] }, { featureType: 'road', elementType: 'labels.text.fill', stylers: [{color: '#9ca5b3'}] }, { featureType: 'road.highway', elementType: 'geometry', stylers: [{color: '#746855'}] }, { featureType: 'road.highway', elementType: 'geometry.stroke', stylers: [{color: '#1f2835'}] }, { featureType: 'road.highway', elementType: 'labels.text.fill', stylers: [{color: '#f3d19c'}] }, { featureType: 'transit', elementType: 'geometry', stylers: [{color: '#2f3948'}] }, { featureType: 'transit.station', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}] }, { featureType: 'water', elementType: 'geometry', stylers: [{color: '#17263c'}] }, { featureType: 'water', elementType: 'labels.text.fill', stylers: [{color: '#515c6d'}] }, { featureType: 'water', elementType: 'labels.text.stroke', stylers: [{color: '#17263c'}] } ] }); }
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
<!DOCTYPE html> <html> <head> <title>Styled Maps - Night Mode</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script> function initMap() { // Styles a map in night mode. var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 40.674, lng: -73.945}, zoom: 12, styles: [ {elementType: 'geometry', stylers: [{color: '#242f3e'}]}, {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]}, {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]}, { featureType: 'administrative.locality', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}] }, { featureType: 'poi', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}] }, { featureType: 'poi.park', elementType: 'geometry', stylers: [{color: '#263c3f'}] }, { featureType: 'poi.park', elementType: 'labels.text.fill', stylers: [{color: '#6b9a76'}] }, { featureType: 'road', elementType: 'geometry', stylers: [{color: '#38414e'}] }, { featureType: 'road', elementType: 'geometry.stroke', stylers: [{color: '#212a37'}] }, { featureType: 'road', elementType: 'labels.text.fill', stylers: [{color: '#9ca5b3'}] }, { featureType: 'road.highway', elementType: 'geometry', stylers: [{color: '#746855'}] }, { featureType: 'road.highway', elementType: 'geometry.stroke', stylers: [{color: '#1f2835'}] }, { featureType: 'road.highway', elementType: 'labels.text.fill', stylers: [{color: '#f3d19c'}] }, { featureType: 'transit', elementType: 'geometry', stylers: [{color: '#2f3948'}] }, { featureType: 'transit.station', elementType: 'labels.text.fill', stylers: [{color: '#d59563'}] }, { featureType: 'water', elementType: 'geometry', stylers: [{color: '#17263c'}] }, { featureType: 'water', elementType: 'labels.text.fill', stylers: [{color: '#515c6d'}] }, { featureType: 'water', elementType: 'labels.text.stroke', stylers: [{color: '#17263c'}] } ] }); } </script> <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap" async defer></script> </body> </html>
Para obter uma lista de todos os valores disponíveis para featureType
, elementType
e stylers
, consulte a referência de estilo do JSON.
Aplicar tipos de mapa padrão ou criar seu próprio tipo de mapa
Há duas formas de aplicar estilos a um mapa:
- Defina a propriedade
.styles
do objetoMapOptions
do mapa. Essa abordagem altera o estilo dos tipos de mapa padrão. As imagens básicas em visualizações de terreno e satélite não são afetadas, mas vias, rótulos e outros componentes do mapa respeitam as regras de estilo. Veja como alterar o estilo de mapa padrão. - Crie um
StyledMapType
e aplique-o ao mapa. Essa ação cria um novo tipo de mapa que o usuário pode selecionar no controle de tipos de mapa. Veja como criar um tipo de mapa estilizado.
As duas abordagens aceitam uma matriz de objetos MapTypeStyle
, onde cada elemento é composto de seletores e estilizadores. Consulte a seção sobre sintaxe de estilo a seguir.
Para clientes do Google Maps APIs Premium Plan, no estilo de mapa padrão, os rótulos estão desativados para os recursos de mapa da categoria poi.business
. Esses rótulos podem ser ativados novamente aplicando um estilo personalizado.
Sintaxe de estilo
Os mapas estilizados usam dois conceitos para aplicar cores e outras alterações de estilo em um mapa:
- Os seletores especificam os componentes geográficos que podem ser estilizados no mapa. Por exemplo, vias, parques, extensões de água e outros, bem como seus rótulos. Os seletores incluem recursos e elementos, especificados como propriedades
featureType
eelementType
. - Os estilizadores são propriedades de cor e visibilidade que podem ser aplicados a elementos do mapa. Eles definem a cor exibida por meio de uma combinação de valores de matiz, cor e brilho/gama.
Para aplicar estilo a um mapa, combine os seletores e estilizadores em uma matriz de estilos e passe-a ao objeto MapOptions
ou ao construtor StyledMapType
do mapa padrão. A matriz tem o seguinte formato:
var stylesArray = [ { featureType: '', elementType: '', stylers: [ {color: ''}, {visibility: ''}, // Add any stylers you need. ] }, { featureType: '', // Add the stylers you need. } ]
Para obter uma lista de todos os valores disponíveis para featureType
, elementType
e stylers
, consulte a referência de estilo do JSON.
Alterar o estilo de mapa padrão
Para modificar os estilos dos tipos de mapa padrão, defina a matriz de estilos nas MapOptions
do mapa durante a construção ou chamando setOptions
. As alterações em rótulos e vias afetam todos os tipos de mapa (mapas de terreno, satélite e híbridos, bem como o tipo de mapa de vias padrão).
Consulte o exemplo na parte superior da página.
Para obter uma lista de todos os valores disponíveis para featureType
, elementType
e stylers
, consulte a referência de estilo do JSON.
Criar um tipo de mapa estilizado
Adicione um novo tipo de mapa para aplicação de estilos criando um StyledMapType
e passando informações de seletor e estilizador ao construtor. Essa abordagem não afeta o estilo dos tipos de mapa padrão.
No exemplo a seguir, observe o controle Styled Map na parte superior esquerda do mapa. Esse é o novo tipo de mapa criado no exemplo de código.
function initMap() { // Create a new StyledMapType object, passing it an array of styles, // and the name to be displayed on the map type control. var styledMapType = new google.maps.StyledMapType( [ {elementType: 'geometry', stylers: [{color: '#ebe3cd'}]}, {elementType: 'labels.text.fill', stylers: [{color: '#523735'}]}, {elementType: 'labels.text.stroke', stylers: [{color: '#f5f1e6'}]}, { featureType: 'administrative', elementType: 'geometry.stroke', stylers: [{color: '#c9b2a6'}] }, { featureType: 'administrative.land_parcel', elementType: 'geometry.stroke', stylers: [{color: '#dcd2be'}] }, { featureType: 'administrative.land_parcel', elementType: 'labels.text.fill', stylers: [{color: '#ae9e90'}] }, { featureType: 'landscape.natural', elementType: 'geometry', stylers: [{color: '#dfd2ae'}] }, { featureType: 'poi', elementType: 'geometry', stylers: [{color: '#dfd2ae'}] }, { featureType: 'poi', elementType: 'labels.text.fill', stylers: [{color: '#93817c'}] }, { featureType: 'poi.park', elementType: 'geometry.fill', stylers: [{color: '#a5b076'}] }, { featureType: 'poi.park', elementType: 'labels.text.fill', stylers: [{color: '#447530'}] }, { featureType: 'road', elementType: 'geometry', stylers: [{color: '#f5f1e6'}] }, { featureType: 'road.arterial', elementType: 'geometry', stylers: [{color: '#fdfcf8'}] }, { featureType: 'road.highway', elementType: 'geometry', stylers: [{color: '#f8c967'}] }, { featureType: 'road.highway', elementType: 'geometry.stroke', stylers: [{color: '#e9bc62'}] }, { featureType: 'road.highway.controlled_access', elementType: 'geometry', stylers: [{color: '#e98d58'}] }, { featureType: 'road.highway.controlled_access', elementType: 'geometry.stroke', stylers: [{color: '#db8555'}] }, { featureType: 'road.local', elementType: 'labels.text.fill', stylers: [{color: '#806b63'}] }, { featureType: 'transit.line', elementType: 'geometry', stylers: [{color: '#dfd2ae'}] }, { featureType: 'transit.line', elementType: 'labels.text.fill', stylers: [{color: '#8f7d77'}] }, { featureType: 'transit.line', elementType: 'labels.text.stroke', stylers: [{color: '#ebe3cd'}] }, { featureType: 'transit.station', elementType: 'geometry', stylers: [{color: '#dfd2ae'}] }, { featureType: 'water', elementType: 'geometry.fill', stylers: [{color: '#b9d3c2'}] }, { featureType: 'water', elementType: 'labels.text.fill', stylers: [{color: '#92998d'}] } ], {name: 'Styled Map'}); // Create a map object, and include the MapTypeId to add // to the map type control. var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 55.647, lng: 37.581}, zoom: 11, mapTypeControlOptions: { mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain', 'styled_map'] } }); //Associate the styled map with the MapTypeId and set it to display. map.mapTypes.set('styled_map', styledMapType); map.setMapTypeId('styled_map'); }
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; }
<!-- Replace the value of the key parameter with your own API key. --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"> </script>
<!DOCTYPE html> <html> <head> <title>Styled Map Types</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta charset="utf-8"> <style> /* Always set the map height explicitly to define the size of the div * element that contains the map. */ #map { height: 100%; } /* Optional: Makes the sample page fill the window. */ html, body { height: 100%; margin: 0; padding: 0; } </style> </head> <body> <div id="map"></div> <script> function initMap() { // Create a new StyledMapType object, passing it an array of styles, // and the name to be displayed on the map type control. var styledMapType = new google.maps.StyledMapType( [ {elementType: 'geometry', stylers: [{color: '#ebe3cd'}]}, {elementType: 'labels.text.fill', stylers: [{color: '#523735'}]}, {elementType: 'labels.text.stroke', stylers: [{color: '#f5f1e6'}]}, { featureType: 'administrative', elementType: 'geometry.stroke', stylers: [{color: '#c9b2a6'}] }, { featureType: 'administrative.land_parcel', elementType: 'geometry.stroke', stylers: [{color: '#dcd2be'}] }, { featureType: 'administrative.land_parcel', elementType: 'labels.text.fill', stylers: [{color: '#ae9e90'}] }, { featureType: 'landscape.natural', elementType: 'geometry', stylers: [{color: '#dfd2ae'}] }, { featureType: 'poi', elementType: 'geometry', stylers: [{color: '#dfd2ae'}] }, { featureType: 'poi', elementType: 'labels.text.fill', stylers: [{color: '#93817c'}] }, { featureType: 'poi.park', elementType: 'geometry.fill', stylers: [{color: '#a5b076'}] }, { featureType: 'poi.park', elementType: 'labels.text.fill', stylers: [{color: '#447530'}] }, { featureType: 'road', elementType: 'geometry', stylers: [{color: '#f5f1e6'}] }, { featureType: 'road.arterial', elementType: 'geometry', stylers: [{color: '#fdfcf8'}] }, { featureType: 'road.highway', elementType: 'geometry', stylers: [{color: '#f8c967'}] }, { featureType: 'road.highway', elementType: 'geometry.stroke', stylers: [{color: '#e9bc62'}] }, { featureType: 'road.highway.controlled_access', elementType: 'geometry', stylers: [{color: '#e98d58'}] }, { featureType: 'road.highway.controlled_access', elementType: 'geometry.stroke', stylers: [{color: '#db8555'}] }, { featureType: 'road.local', elementType: 'labels.text.fill', stylers: [{color: '#806b63'}] }, { featureType: 'transit.line', elementType: 'geometry', stylers: [{color: '#dfd2ae'}] }, { featureType: 'transit.line', elementType: 'labels.text.fill', stylers: [{color: '#8f7d77'}] }, { featureType: 'transit.line', elementType: 'labels.text.stroke', stylers: [{color: '#ebe3cd'}] }, { featureType: 'transit.station', elementType: 'geometry', stylers: [{color: '#dfd2ae'}] }, { featureType: 'water', elementType: 'geometry.fill', stylers: [{color: '#b9d3c2'}] }, { featureType: 'water', elementType: 'labels.text.fill', stylers: [{color: '#92998d'}] } ], {name: 'Styled Map'}); // Create a map object, and include the MapTypeId to add // to the map type control. var map = new google.maps.Map(document.getElementById('map'), { center: {lat: 55.647, lng: 37.581}, zoom: 11, mapTypeControlOptions: { mapTypeIds: ['roadmap', 'satellite', 'hybrid', 'terrain', 'styled_map'] } }); //Associate the styled map with the MapTypeId and set it to display. map.mapTypes.set('styled_map', styledMapType); map.setMapTypeId('styled_map'); } </script> <script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"> </script> </body> </html>
Para obter uma lista de todos os valores disponíveis para featureType
, elementType
e stylers
, consulte a referência de estilo do JSON.
Google Maps APIs Styling Wizard
Use o Google Maps APIs Styling Wizard como forma rápida de gerar um objeto de estilo do JSON.