--- title: "Mapas do Google Maps e do Mapbox com as suas cores" description: "Talvez você se pergunte o que um mapa com as suas cores muda de verdade. Aqui estão três exemplos, da coerência do seu design à história que você quer que o seu" canonical_url: "https://pt.goodbarber.com/blog/mapas-com-as-suas-cores-a1388/" lang: pt date: 2026-10-28 last_updated: 2026-10-29 --- # Mapas com as suas cores Você escolheu seu tema e ajustou suas cores, fontes e ícones para que o seu app tenha a sua cara. Aí seus usuários abrem o mapa e encontram aquele que conhecem de cor, o mesmo de todos os lugares. Dependendo da sua atividade, é uma tela onde eles passam tempo, e até agora ela não pertencia à sua marca. ![](https://blog.goodbarber.com/_public/profile/6a/6ac86fe0c44e1457a046324ec18c6897e8e94b27-default.jpg) [Florian Luccioni](https://pt.goodbarber.com/blog/author/flo-luccioni/)PWA Developer 28 de out. de 2026 · Atualizado em 29 de out. de 2026 · 5 min de leitura ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98526282-68743067.jpg?v=1793261327.4442275) Talvez você se pergunte o que um mapa com as suas cores muda de verdade. Aqui estão três exemplos, da coerência do seu design à história que você quer que o seu app conte. ## Para que tenham a sua cara Os PWA GoodBarber exibem seus mapas interativos com um dos dois principais fornecedores: Google ou Mapbox. Os dois oferecem ferramentas de personalização muito avançadas para desenhar fundos de mapa com a sua identidade. Agora você pode vincular esses estilos aos seus mapas, e o design do seu app continua coerente. ![](https://cmsphoto.ww-cdn.com/superstatic/121801/art/grande/98526282-68743068.jpg?v=1793196463.3167887) Essas ferramentas vão além da paleta de cores. Elas deixam você escolher o que fica visível no fundo do mapa, e portanto o que os seus usuários vão ver. No app de campus universitário acima, os prédios e as bibliotecas ganham destaque e o comércio fica oculto: não é isso que os estudantes procuram. Imagine agora o app da sua loja, ou da sua rede de lojas. Ocultar os pontos de interesse padrão é parar de fazer propaganda para a concorrência. ## Para criar um clima Quanto mais marcante é o design do seu app, mais o contraste com um mapa padrão chama a atenção. Pense no app de um festival com uma identidade muito forte. Com um fundo de mapa personalizado, o mapa passa a fazer parte da experiência. Ele mantém só o que importa na noite do evento: os palcos e o transporte. As ruas e as ferrovias ficam roxas e verde neon, com as cores do festival. ![Mapa do app Nuit Sonique com um estilo personalizado: fundo noturno, ruas roxas e verde neon, nenhuma loja exibida.](https://cmsphoto.ww-cdn.com/superstatic/1379309/art/default/98526413-68743288.jpg) ![O mesmo mapa com o estilo padrão do Google Maps: supermercados, lojas e outros pontos de interesse exibidos.](https://cmsphoto.ww-cdn.com/superstatic/1379309/art/default/98526413-68743287.jpg) Padrão Personalizado *Comparação entre o estilo padrão do Google Maps e um estilo personalizado* ## Para contar outra história As ferramentas de personalização vão além das cores: elas adicionam suas próprias camadas de dados, relevo, rotas. Essas camadas servem de base para os seus conteúdos Mapa do CMS GoodBarber e para os seus [arquivos KML importados](https://pt.goodbarber.com/extensions/kml/). O mapa vira então um conteúdo editorial em si, com a mesma ferramenta. [Vídeo: a Haute Route Corse em um mapa personalizado com o Mapbox](https://player.vimeo.com/video/1240269543?background=1&autoplay=1&loop=1&muted=1&autopause=0&dnt=1) ![Imagem fixa do vídeo: a rota da Haute Route Corse em um mapa com relevo personalizado com o Mapbox.](https://cmsphoto.ww-cdn.com/superstatic/1379309/art/default/98526413-68743579.jpg) Aceite os cookies de estatísticas para assistir a este vídeo do Vimeo. Gerenciar cookies Para este vídeo, a rota GPX foi importada no Mapbox Studio, estilizada e depois publicada em um estilo totalmente novo. Bastou colar esse estilo nas configurações de mapa de uma seção. O mesmo estilo pode vestir todos os mapas do app, ou só um widget Mapa da página inicial. ## É fácil de fazer? Sim. Você cria seu estilo no fornecedor que preferir: um Map ID no console do Google Cloud, ou uma URL de estilo no Mapbox Studio. Depois você cola no back office, para o app inteiro ou para uma seção Mapa, uma seção Agenda ou um widget Mapa específico. O passo a passo está nos nossos artigos de ajuda: [para o Google Maps](https://pt.goodbarber.com/help/exibir-mapas-no-pwa-r118/configurar-o-google-maps-para-o-seu-pwa-a289/) e [para o Mapbox](https://pt.goodbarber.com/help/exibir-mapas-no-pwa-r118/configurar-o-mapbox-para-o-seu-pwa-a343/). Mal podemos esperar para ver os seus mapas. E se você ainda não tem um PWA para expressar a sua criatividade, [crie o seu](https://pt.goodbarber.com/create/) com a GoodBarber, o Mobile App Builder no-code. ![](https://blog.goodbarber.com/_public/profile/6a/6ac86fe0c44e1457a046324ec18c6897e8e94b27-default.jpg) Sobre o autor Flo Luccioni PWA Developer I’m a frontend developer on GoodBarber’s Progressive Web Apps team, where we build the rendering engine of our no-code platform for browsers. I work on the shared UI and performance foundations that make our users’ no-code experience into fast, polished and accessible web products that feel native on every device. [Mais de Flo](https://pt.goodbarber.com/blog/author/flo-luccioni/)[LinkedIn](https://www.linkedin.com/in/floluccioni/)