Biblioteca do Fórum Google MapsConteúdo produzido pelos Principais Colaboradores do Google Maps em Língua Portuguesa

Como usar o Assistente de Mapas Estilizados

Este tutorial demonstra como usar o Assistente de Mapas Estilizados para:

a. selecionar as feições que deseja inserir em seu mapa

b. aplicar operações às feições selecionadas

c. gerar mapas estáticos que podem ser salvos ou impressos

d. salvar os estilos para JSON a fim de usar o código em sua aplicação

Para conhecer melhor a “Google Maps JavaScript API” entre em:

https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapOptions

Como usar o Assistente de Mapas Estilizados

Acesse o Assistente de Mapas Estilizados e familiarize-se com a interface.

O painel da esquerda contém os Seletores (“Selectors”). O painel da direita mostra o Estilo de Mapa (“Map Style”).

As instruções em inglês são mostradas em uma caixa de informações e podem ser desativadas clicando em “x” no canto superior direito da caixa. Para reativar clique em “Help”.

Como usar o Assistente de Mapas Estilizados

Exiba a área de seu interesse.

A seleção da área pode ser feita de duas maneiras:

● navegando interativamente no mapa

● fazendo a busca pelo nome do lugar

Digite o nome do lugar que desejar, por exemplo, “Brasil” e pressione “Enter” no teclado. A área é exibida em detalhe na tela.

Como usar o Assistente de Mapas Estilizados

Observe o painel à esquerda e veja que há várias opções que compõem o Seletor (“Selector”).

Uma das opções se refere aos tipos de feições (“Feature Type”).

Por padrão, todos os tipos de feições (“All”) estão selecionados. Desta forma, o mapa mostra todo o conteúdo disponível.

No painel à direita consta:

Feature type: allElement type: all

Como usar o Assistente de Mapas Estilizados

“Element type”, ou seja, tipos de elementos, é a segunda opção do painel “Selectors”.

Por padrão, os tipos de elementos estão todos selecionados (“All”).

Na realidade, só há dois tipos de elementos:

● Geometria (“Geometry”)

● Rótulos (“Labels”)

Clique em “Labels”.

Como usar o Assistente de Mapas Estilizados

A terceira opção do painel “Selector” é “Stylers” (Estilizadores).

O primeiro item está associado com a visibilidade (“Visibility”). Há três alternativas:

● “on” (ligado)● “simplified”

(simplificado)● “off” (desligado)

Escolha “off” para desligar os rótulos mostrados no mapa. Clique em “Static map” (mapa estático) no painel da direita.

Como usar o Assistente de Mapas Estilizados

O mapa estático estilizado é mostrado na tela flutuante.

Na parte inferior da tela é

mostrado um link contendo

todos os atributos definidos

anteriormente:

http://maps.googleapis.

com/maps/api/staticmap?

center=-15.126868,-53.180502

&zoom=4&format=png&sensor

=false&size=640x480&maptype

=roadmap&style=element:

labels|visibility:off

Como usar o Assistente de Mapas Estilizados

Copie o link e cole em outra aba do navegador.

Note que o mapa estático sem rótulos é mostrado na tela.

Clique com o botão direito do mouse sobre o mapa e escolha “Salvar imagem como”, escolha onde salvar e que nome atribuir à imagem que estará no formato PNG.

Se preferir, copie a imagem do mapa estático e cole em outro documento.

Você pode também imprimir seu mapa estático.

Como usar o Assistente de Mapas Estilizados

Retorne à aba do navegador que mostra o mapa estático estilizado na tela flutuante.

Clique em “x” no canto superior direito da caixa.

Para conhecer melhor a “Google Maps JavaScript API” entre neste link:

https://developers.google.com/maps/documentation/javascript/reference?csw=1#MapOptions

Como usar o Assistente de Mapas Estilizados

No canto superior direito ainda está selecionada a opção “Mapa”.

Para adicionar mais uma camada de estilo, clique em “Add” no canto superior direito do painel da direita.

Como usar o Assistente de Mapas Estilizados

Veja que no painel da direita há uma nova camada de estilo a ser editada.

Os procedimentos anteriores podem ser seguidos, fazendo as escolhas que melhor atender a sua necessidade.

Até agora o plano de fundo mostrado foi o mapa básico, mas a imagem de satélite também pode ser escolhida como background para gerar mapas estáticos e objetos JSON.

Como usar o Assistente de Mapas Estilizados

No canto superior direito clique em “Satélite”.

Verifique que é possível habilitar ou desabilitar os “Marcadores”, que representam os limites político-administrativos.

Embora os limites sejam mostrados não são exibidos os nomes dos países.

Como usar o Assistente de Mapas Estilizados

Ao desabilitar os “Marcadores” os limites político-administrativos não são mais exibidos.

Habilite novamente os “Marcadores”, que representam os limites político-administrativos, pois agora você vai enriquecer ainda mais o mapa exibindo sobre ele os rótulos contendo os nomes dos países.

Como usar o Assistente de Mapas Estilizados

No painel da esquerda, em “Element type” selecione: “Label”->”Text”

Em “Stylers” selecione “Visibility”->”On”.

Note que agora os nomes dos países são exibidos sobre a imagem de satélite que já mostra os limites. No painel da direita consta:

Feature type: allElement type: labels.textVisibility: on

Clique em “Show JSON” no canto inferior esquerdo do painel da direita.

Como usar o Assistente de Mapas Estilizados

Veja o objeto JSON gerado na tela flutuante:

Google Maps API v3 Styled Maps JSON

{ "elementType": "labels", "stylers": [ { "visibility": "off" } ] },{ "elementType": "labels.text", "stylers": [ { "visibility": "on" } ] }]

Clique em “x” no canto superior direito da tela flutuante.

Como usar o Assistente de Mapas Estilizados

Selecione novamente “Mapa”. Adicione uma nova camada clicando em “Add” no painel da direita.

No painel da esquerda, em “Feature type” e em “Element type” selecione: “All”.

Habilite a opção “Invert lightness” (inverter a luminosidade). Observe que agora os nomes dos países e dos estados são exibidos sobre uma versão estilizada do mapa básico. Para excluir essa camada de estilo clique no ícone da lixeira

Como usar o Assistente de Mapas Estilizados

Selecione novamente “Mapa” e habilite “Terreno” para mostrar o relevo sombreado.

Continue estilizando seu mapa de modo a atender as suas necessidades de informação.

Gere novos mapas estáticos e salve como imagens PNG.

Exiba o objeto JSON, que pode ser copiado e colado em sua aplicação usando o Google Maps API v3.

Quando tiver dúvidas conte com os Principais Colaboradores do Fórum de Ajuda do Google Maps.

Como usar o Assistente de Mapas Estilizados