Pronto!

Para começar a desenvolver, acesse nossa documentação do desenvolvedor.

Ativar a Google Static Maps API

Para começar, orientaremos você pelo Console do Desenvolvedor do Google para realizar algumas atividades:

  1. Criar ou selecionar um projeto
  2. Ativar a Google Static Maps API
  3. Criar chaves apropriadas
Continuar

Mapas estilizados

Personalize a apresentação do mapa padrão do Google aplicando seus próprios estilos durante o uso da Google Static Maps API. É possível alterar a exibição visual de recursos como vias, parques, áreas construídas e outros pontos de interesse. Altere as cores ou o estilo dos recursos para enfatizar determinado conteúdo, complementar conteúdo próximo na página ou até ocultar totalmente os recursos.

Exemplos

O exemplo a seguir exibe um mapa do Brooklyn, EUA, com estilização para colorir as vias locais com verde brilhante e as áreas residenciais com preto. Além disso, o brilho dos rótulos é invertido para que se destaquem melhor do fundo escuro. Observe que esse exemplo funcional usa codificação de URL:

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=15&center=Brooklyn&style=feature:road.local%7Celement:geometry%7Ccolor:0x00ff00&style=feature:landscape%7Celement:geometry.fill%7Ccolor:0x000000&style=element:labels%7Cinvert_lightness:true&style=feature:road.arterial%7Celement:labels%7Cinvert_lightness:false&key=YOUR_API_KEY

O exemplo a seguir usa operações e simplificações de estilo para criar uma imagem aproximada de um atlas de estradas dos EUA:

https://maps.googleapis.com/maps/api/staticmap?size=512x512&zoom=12&center=Chicago&format=png&style=feature:road.highway%7Celement:geometry%7Cvisibility:simplified%7Ccolor:0xc280e9&style=feature:transit.line%7Cvisibility:simplified%7Ccolor:0xbababa&style=feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff&key=YOUR_API_KEY

Sintaxe de estilo

Para criar um mapa estilizado personalizado, inclua um ou mais parâmetros style no URL da solicitação.

Cada declaração de style pode conter os argumentos a seguir, separados por barras verticais ("|"):

  • feature (opcional) indica os recursos a selecionar para essa modificação de estilo. Os recursos incluem itens no mapa como vias, parques ou outros pontos de interesse. Se nenhum argumento feature estiver presente, o estilo especificado será aplicado a todos os recursos.
  • element (opcional) indica os elementos do recurso especificado a selecionar para essa modificação de estilo. Os elementos são características de um recurso, como geometria ou rótulos. Se nenhum argumento element estiver presente, o estilo se aplicará a todos os elementos do recurso especificado.
  • Um conjunto de regras de estilo (obrigatório) a aplicar nos recursos e elementos especificados. A API aplica as regras na ordem em que aparecem na declaração style. Inclua qualquer número de regras, dentro das restrições normais de comprimento de URL do Google Static Maps API.

Observação: a declaração style deve especificar os argumentos acima na ordem indicada. O exemplo a seguir mostra a sintaxe correta de uma seleção de um recurso e um elemento com duas regras:

style=feature:myFeatureArgument|element:myElementArgument|myRule1:myRule1Argument|myRule2:myRule2Argument

Recursos

A declaração style a seguir aplica cores a todas as vias do mapa:

style=feature:road|color:0xffffff

Estas são algumas seleções de recursos comuns:

  • feature:all (padrão) seleciona todos os componentes do mapa.
  • feature:road seleciona todas as estradas do mapa.
  • feature:road.local seleciona todas as vias locais.

Recursos, ou tipos de recurso, são características geográficas do mapa, que incluem estradas, parques, corpos hídricos, estabelecimentos e outros.

Os recursos formam uma árvore de categorias, com all sendo a raiz. Se você não especificar um recurso, todos os recursos serão selecionados. Especificar um recurso de all produz o mesmo efeito.

Alguns recursos contêm recursos secundários que se especifica usando um ponto. Por exemplo, landscape.natural ou road.local. Se você só especificar o recurso primário, como road, os estilos definidos para o primário aplicam-se a todos os seus secundários, como road.local e road.highway.

Observe que recursos primários podem conter elementos não incluídos em todos os seus secundários.

Os seguintes recursos estão disponíveis:

  • all (padrão) seleciona todos os recursos.
  • administrative seleciona todas as áreas administrativas. A aplicação de estilo afeta somente as etiquetas de áreas administrativas, não de bordas nem preenchimento geográficos.
    • administrative.country seleciona países.
    • administrative.land_parcel seleciona partes de terra.
    • administrative.locality seleciona localidades.
    • administrative.neighborhood seleciona bairros.
    • administrative.province seleciona províncias.
  • landscape seleciona todas as paisagens naturais.
    • landscape.man_made seleciona estruturas construídas pelo homem.
    • landscape.natural seleciona recursos naturais.
    • landscape.natural.landcover seleciona propriedades da camada da superfície do solo.
    • landscape.natural.terrain seleciona propriedades de terreno.
  • poi seleciona todos os pontos de interesse.
    • poi.attraction seleciona locais turísticos.
    • poi.business seleciona estabelecimentos.
    • poi.government seleciona edifícios públicos.
    • poi.medical seleciona serviços de emergência, incluindo hospitais, farmácias, polícia, médicos e outros.
    • poi.park seleciona estacionamentos.
    • poi.place_of_worship seleciona locais de culto, incluindo igrejas, templos, mesquitas e outros.
    • poi.school seleciona escolas.
    • poi.sports_complex seleciona complexos esportivos.
  • road seleciona todas as vias.
    • road.arterial seleciona vias arteriais.
    • road.highway seleciona rodovias.
    • road.highway.controlled_access seleciona rodovias com acesso controlado.
    • road.local seleciona vias locais.
  • transit seleciona todas as estações e linhas de trânsito.
    • transit.line seleciona linhas de trânsito.
    • transit.station seleciona todas as estações de trânsito.
    • transit.station.airport seleciona aeroportos.
    • transit.station.bus seleciona pontos de ônibus.
    • transit.station.rail seleciona estações de trem e metrô.
  • water seleciona corpos hídricos.

Elementos

A declaração de style a seguir aplica cores aos rótulos de todas as vias locais:

style=feature:road.local|element:labels|color:0xffffff

Elementos são subdivisões de um recurso. Uma via, por exemplo, é composta pela linha gráfica (a geometria) no mapa, e pelo texto que indica seu nome (uma etiqueta).

Os elementos a seguir estão disponíveis, mas observe que um recurso específico pode oferecer suporte a todos, alguns ou nenhum dos elementos:

  • all (padrão) selecione todos os elementos do recurso especificado.
  • geometry seleciona todos os elementos geométricos do recurso especificado.
    • geometry.fill seleciona apenas o preenchimento da geometria do recurso.
    • geometry.stroke seleciona apenas o traço da geometria do recurso.
  • labels seleciona as etiquetas de texto associadas ao recurso especificado.
    • labels.icon seleciona apenas o ícone exibido no rótulo do recurso.
    • labels.text seleciona apenas o texto do rótulo.
    • labels.text.fill seleciona apenas o preenchimento do rótulo. Normalmente, o preenchimento de um rótulo é renderizado como um contorno colorido que rodeia o texto do rótulo.
    • labels.text.stroke seleciona apenas o traço do texto do rótulo.

Regras de estilo

Regras de estilo são opções de formatação aplicadas aos componentes e elementos especificados em cada declaração de style.

A declaração de style a seguir aplica duas regras de estilo às vias no mapa. A primeira regra aplica uma cor às vias. A segunda regra simplifica a exibição das vias, que passam a ter linhas mais finas sem contorno:

style=feature:road|color:0xffffff|visibility:simplified

Cada declaração de style deve conter uma ou mais operações separadas por um caractere de barra vertical ("|"). Cada operação especifica seu valor de argumento usando o caractere de dois pontos (":") e todas as operações são aplicadas à seleção na ordem em que são especificadas.

As seguintes opções de estilo são oferecidas:

  • hue (uma string hexadecimal em RGB de formato 0xRRGGBB) indica a cor básica.

    Observação: Essa opção define o matiz ao mesmo tempo em que mantém a saturação e o tom especificados no estilo Google padrão (ou em outras opções de estilo que você definir no mapa). A cor resultante tem relação com o estilo do mapa de base. Se o Google fizer alguma alteração no estilo do mapa de base, ela afetará os recursos do seu mapa estilizados com hue. Se possível, é melhor usar um estilizador color absoluto.

  • lightness (um valor de ponto flutuante entre -100 e 100) indica a mudança percentual de brilho do elemento. Valores negativos reduzem o brilho (-100 especifica a cor preta) e valores negativos aumentam o brilho (+100 especifica a cor branca).

    Observação: Essa opção define o tom ao mesmo tempo em que mantém a saturação e o matiz especificados no estilo Google padrão (ou em outras opções de estilo que você definir no mapa). A cor resultante tem relação com o estilo do mapa de base. Se o Google fizer alguma alteração no estilo do mapa de base, ela afetará os recursos do seu mapa estilizados com lightness. Se possível, é melhor usar um estilizador color absoluto.

  • saturation (um valor de ponto flutuante entre -100 e 100) indica a mudança percentual na intensidade da cor básica a ser aplicada ao elemento.

    Observação: Essa opção define a saturação ao mesmo tempo em que mantém o matiz e o tom especificados no estilo Google padrão (ou em outras opções de estilo que você definir no mapa). A cor resultante tem relação com o estilo do mapa de base. Se o Google fizer alguma alteração no estilo do mapa de base, ela afetará os recursos do seu mapa estilizados com saturation. Se possível, é melhor usar um estilizador color absoluto.

  • gamma (um valor de ponto flutuante entre 0.01 e 10.0, onde 1.0 não aplica correções) indica a quantidade de correção de gama a ser aplicada ao elemento. As correções de gama modificam o tom das cores de maneira não linear, embora não afetem valores de branco e preto. Normalmente se usa esse recurso para modificar o contraste de vários elementos. Por exemplo, é possível modificar a gama para aumentar ou diminuir o contraste entre as margens e o interior dos elementos.

    Observação: Essa opção ajusta o tom relacionado ao estilo Google padrão usando uma curva de gama. Se o Google fizer alguma alteração no estilo do mapa de base, ela afetará os recursos do seu mapa estilizados com gama. Se possível, é melhor usar um estilizador color absoluto.

  • invert_lightness (se true) inverte o tom atual. Isso é útil, por exemplo, para alternar rapidamente para um mapa mais escuro com texto em branco.

    Observação: Essa opção simplesmente inverte o estilo Google padrão. Se o Google fizer alguma alteração no estilo do mapa de base, ela afetará os recursos do seu mapa estilizados com invert_lightness. Se possível, é melhor usar um estilizador color absoluto.

  • visibility (on, off ou simplified) indica se e como o elemento é exibido no mapa. Uma visibilidade simplified remove alguns recursos de estilo dos recursos afetados. Por exemplo, vias são simplificadas para linhas mais finas sem contornos e parques deixam de ter o texto dos rótulos, mas retêm o ícone do rótulo.
  • color (uma string hexadecimal em RGB de formato 0xRRGGBB) define a cor do recurso.
  • weight (um valor inteiro, maior ou igual a zero) define o peso do recurso, em pixels. Um valor alto de peso pode resultar em truncamento perto das margens da borda.

As regras de estilo se aplicam na ordem em que forem especificadas. Não combine operações em uma única operação de estilo. Em vez disso, defina cada operação como uma entrada separada na matriz de estilo.

Observação: A ordem é importante, pois algumas operações não são comutativas. Recursos e/ou elementos modificados por meio de operações de estilo (normalmente) já têm estilos. Caso haja estilos, as operações os modificam.

O modelo matiz, saturação e tom

Mapas estilizados usam o modelo matiz, saturação e tom (HSL, na sigla em inglês) para detonar cor nas operações de estilo. A tonalidade é a cor básica, a saturação é a intensidade dessa cor e o brilho é a quantidade relativa de branco ou preto na cor constituinte.

A correção de gama modifica o tom no espaço da cor, geralmente aumentando ou reduzindo o contraste. Além disso, o modelo de HSL define a cor dentro de um espaço coordenado, onde hue indica a orientação em uma paleta de cores e saturation e lightness indicam amplitudes em diferentes eixos. Tonalidades são medidas dentro de um espaço de cor RGB, que é similar à maioria dos espaços de cor RGB, mas sem os tons de preto e branco.

Modelo matiz, saturação e tom

Embora hue assuma um valor de cor hexadecimal HTML, só usa este valor para determinar a cor básica — ou seja, sua orientação na paleta de cores, não definindo saturação nem tom, que são indicados em separado como mudanças percentuais.

Por exemplo, você pode definir o matiz de verde puro como hue:0x00ff00 ou hue:0x000100. Ambas as matizes são idênticas. Ambos os valores apontam para o verde puro no modelo de cor HSL.

Uma paleta de cores RGB

Os valores em RGB de hue, que consiste em frações ideais de vermelho, verde e azul não indicam um matiz, porque nenhum desses valores indica uma orientação no espaço de coordenadas HSL. Alguns exemplos são "#000000" (preto), "#FFFFFF" (branco), e todos os tons puros de cinza. Para indicar preto, branco ou cinza, remova todos os valores de saturation (defina o valor como -100) e ajuste lightness.

Além disso, ao modificar recursos existentes que já têm um esquema de cores, alterar um valor como hue não altera os valores existentes para saturation ou lightness.

Enviar comentários sobre…

Google Static Maps API
Precisa de ajuda? Acesse nossa página de suporte.