Pinos (ícones) customizados para Google Maps

O Google Maps é uma ferramenta poderosa de mapeamento, e pode ser usada basicamente de duas formas:

• Google Maps API (via código e programação)
• Google MyMaps (versão fácil, a partir de arquivos excel ou csv). Veja como usar aqui, em versão rápida, ou aqui, em versão detalhada

No entanto, o estilo visual padrão pode deixar a desejar:

Mas não é nada que não se resolva com um pouco de personalização.
Use os marcadores abaixo para customizar o seu mapa e substituir os pinos padrão do Google Maps, tanto na API como no MyMaps. Salve os ícones em PNG, ou copie a URL da imagem (ou baixe todos os pinos aqui)

Estilo uniforme

Marcadores iguais para todo o conjunto de dados.
Clique no baldinho de tinta para alterar > "Mais ícones" > "Ícone personalizado" > Faça upload de um ícone png ou cole a URL de um deles:

Pino básico

Marcador estilizado com sombra


http://www.guilhermestorck.com.br/dadosfinos/pinos-gmaps/pino-basico.png
*Utilizar com cuidado: no MyMaps não pode ser usado para apontar lugares com precisão, pois o centro do pino é posicionado no local, e não a base. No Maps API é possível especificar onde é a "âncora" do pino

Círculos transparentes

Bolhas com 24px e 80% de transparência para mostrar itens sobrepostos


http://www.guilhermestorck.com.br/dadosfinos/pinos-gmaps/m/amarelo.png

http://www.guilhermestorck.com.br/dadosfinos/pinos-gmaps/m/azul.png

http://www.guilhermestorck.com.br/dadosfinos/pinos-gmaps/m/laranja.png

http://www.guilhermestorck.com.br/dadosfinos/pinos-gmaps/m/roxo.png

http://www.guilhermestorck.com.br/dadosfinos/pinos-gmaps/m/verde.png

http://www.guilhermestorck.com.br/dadosfinos/pinos-gmaps/m/vermelho.png

Estilo por coluna de dados

Marcadores variáveis conforme os dados.
Troque o "Estilo Uniforme" por "Estilo por coluna de dados", escolha uma coluna numérica, e personalize um ícone para cada faixa de valor.

Círculos de cores diferentes

Bolhas com tons diferentes da mesma cor (e 80% de transparência)

(disponível em amarelo, azul, laranja, preto, roxo, verde e vermelho)


http://www.guilhermestorck.com.br/dadosfinos/pinos-gmaps/m/azul-1.png

http://www.guilhermestorck.com.br/dadosfinos/pinos-gmaps/m/azul-2.png

http://www.guilhermestorck.com.br/dadosfinos/pinos-gmaps/m/azul-3.png

Círculos de tamanhos diferentes

Bolhas com 12px (P), 24px (M) e 36px (G) (e 80% de transparência)

(disponível em amarelo, azul, laranja, preto, roxo, verde e vermelho)


http://www.guilhermestorck.com.br/dadosfinos/pinos-gmaps/p/vermelho.png

http://www.guilhermestorck.com.br/dadosfinos/pinos-gmaps/m/vermelho.png

http://www.guilhermestorck.com.br/dadosfinos/pinos-gmaps/g/vermelho.png

Combine tamanhos e cores

Você pode reforçar uma informação usando a cor e o tamanho como variável. Combine nas URLs os tamanhos P, M e G com a sequência de cor 1, 2 e 3

Transforme uma tabela em mapa interativo do jeito fácil

Veja no passo a passo abaixo como transformar uma tabela do excel com endereços em um mapa interativo no Google Maps. Nesse exemplo os endereços são estados brasileiros.

No Google Maps é possível montar uma visualização de dados simples de um jeito fácil e rápido, formatando cores de forma automática para os pinos, de acordo com uma coluna escolhida na tabela.

Baixe o arquivo de exemplo 

• estados brasileiros com população e homicídios (com nomes de estado, região e siglas)
• mapa de endereços de wifi livre em SP (com nomes de rua ou coordenadas) 

Passo a passo

Mais detalhes

Se você não conseguir reproduzir alguma etapa, veja este tutorial versão detalhada:

Como localizar uma lista ou tabela de endereços com o Google Maps

Ou este tutorial em vídeo:

👉 Mais vídeos: Inscreva-se no canal Dados Finos no Youtube

Veja também:

Mais programas e ferramentas online para trabalhar com mapas aqui.

Tutoriais e dicas para criar mapas

Preciso de um infográfico: Usando recursos visuais para comunicar

Abrir slides em outra janela

Curso no Congresso Abraji 2017 (Associação Brasileira de Jornalismo Investigativo)

Dicas de como visualizar dados no dia-a-dia de uma redação com truques simples no próprio Excel e com outras ferramentas grátis como o Google Maps, Tableau Public e o Raw Graphs.

Com o propósito de democratizar a produção de infográficos, gráficos, mapas e tabelas, o foco do curso é que qualquer um pode aprender a comunicar informações visualmente usando estratégias visuais básicas como Cor, Tamanho, Ordenação e Agrupamentos

Ferramentas extremamente simples são muito bem-vindas, como capturas de tela (o famoso print screen) ou geradores de gifs.

Download da tabela de exemplo

Como localizar uma lista ou tabela de endereços com o Google Maps

Usar o Google Maps para criar mapas a partir de uma lista ou tabela de endereços é fácil e rápido. O modo My Maps permite que você arraste uma tabela CSV, XLS, XLSX.

Dizendo a ele quais são as colunas com informações geográficas (rua, bairro, cidade, estado, país, coordenadas, ...), o Google Maps vai localizar os endereços e colocar pinos no mapa.

Após a localização, a tabela que você jogou lá continua vinculada ao mapa. É ela que vai fornecer informações para definir o nome dos pontos e a descrição que aparece no balãozinho. É possível editar e corrigir pontos no mapa após a localização.

Confira o vídeo e as etapas principas abaixo:

Mapear vários endereços de uma lista ou tabela

👉 Mais vídeos: Inscreva-se no canal Dados Finos no Youtube

Passo-a-passo

• Crie o mapa

1. Entre no Google Maps

2. Clique no menu (ícone de três linhas no canto esquerdo)

3. My Maps

4. No fim da lista dos mapas já criados tem um botão Criar mapa

   Importe a tabela

5. O mapa começa com uma camada inicial (sem título). Depois podem ter várias camadas, dependendo de como você quiser organizar suas informações. Clique no botão azul Importar.

6. Arraste ou clique Selecionar arquivo do computador para escolher a tabela de endereços que você possui.

   • Pode ser uma tabela em CSV (que é um arquivo de texto com os valores separados por vírgula, comum em sites de dados) ou um arquivo do Excel (XLS ou XLSX). Se você quer inserir um mapa já pronto que você pegou de outro lugar, pode baixar um arquivo KML (mapas do Google Maps ou Earth) e arrastar pra lá também. Cada camada suporta apenas um arquivo (para mais arquivos, você deve primeiro Adicionar camada).
   • Se você não tem uma tabela, só uma lista de endereços: Crie uma tabela rápida no excel. Use a primeira linha como cabeçalho e jogue a lista de endereços lá.
   • Em uma tabela, cada informação sobre o mesmo local tem que estar em uma coluna separada (Ex.: Nome / Endereço / Comentário), e cada local diferente deve estar em uma linha diferente. (Para o Google Maps você não precisa dividir o mesmo endereço em mais de uma coluna, como rua, número, bairro,...)

   Configure o mapa

7. Diga a ele quais colunas tem as informações geográficas (rua, bairro, cidade, estado, país, coordenadas, ...). Pode ser mais de uma. Ele vai usar isso para encontrar o endereço. Quanto mais precisa for a informação na tabela, mais confiável vai ser o mapa.

8. Diga qual coluna você quer que seja o nome de cada pino, a informação principal do ponto. Clicando no ponto de interrogação você vê um exemplo das informações que tem na sua tabela. Isso te ajuda a decidir qual o melhor campo para ser o principal.

   Corrigindo endereços

9. Se o Google Maps conseguir localizar tudo sem problemas, não haverá aviso. Os pontos aparecerão no mapa e está pronto.

10. Nas situações mais comuns, como no caso do vídeo, alguns endereços não serão localizados corretamente. Eles podem ser corrigidos de formas diferentes:

    • na tabela, aprimorando a informação geográfica
    • diretamente nos pinos, clicando em cima e arrastando

11. Para corrigir na tabela (método aconselhável), clique em Abrir tabela de dados. Se o botão não estiver visível, clique nas opções da camada (ícone de três pontinhos em pé).

    

12. As linhas com endereços não encontrados aparecem em vermelho. Vá até a coluna que contém o endereço/local. Ajuste o endereço de alguma forma que o Google Maps possa entender e encontrar. Após alterar e dar "Enter" ele já tenta achar novamente, e se localizado o ponto aparece no mapa. Aqui tem o que você pode tentar:

    • Corrija eventuais erros
    • Teste grafias diferentes (y/i, letras duplicadas, th, ...)
    • Aumente a precisão do endereço adicionando bairro ou cidade, caso você saiba (no caso do vídeo só informar que era uma rua foi suficiente; adicionei o R. na frente)

13. Terminadas as correções, clique no X para fechar a tabela de dados.

14. CONFIRA os endereços. Um a um se possível, ou por amostragem. Clique em alguns pontos e veja se estão no lugar onde deveriam.

    • Essa é a parte mais trabalhosa de criar mapas. Note que no vídeo o mapa automático foi criado em 2 min. O restante foi o tempo de correção e ajuste nos locais não encontrados.
    • Se você não tiver tempo de fazer isso, seria honesto informar algo como "endereços encontrados automaticamente; podem haver erros".
    • Na localização inicial automática, dos 38 endereços procurados, 7 não foram encontrados (18%). Se a publicação fosse feita com quase 1/5 dos locais errados ou de fora, dependendo da informação, isso deixaria o mapa inviável ou até errado. Principalmente se você trabalhar numa redação de jornal, o fato de os locais estarem onde deveriam pode diferenciar o seu mapa dos outros.

    Publique

15. O Google Maps salva automaticamente. A frase "Todas as alterações foram salvas" aparece abaixo do título do mapa.

16. Aproveite e dê um título pro seu mapa. Clique no título para preenchê-lo e adicionar uma possível descrição (ela ajuda o seu mapa a ser encontrado)

17. Dê um nome para a(s) camada(s) do seu mapa. Mesmo que seja uma única, ela fica aparente quando o mapa é publicado.

18. Clique em Compartilhar para tornar o mapa público (até então ele só está disponível para você e para quem você compartilhou).

19. Onde diz "Particular" Clique em Alterar. Clique na primeira opção "Ativado - Público na Web". Depois, em Salvar.

20. Agora você pode copiar o link para compartilhar, ou, se quiser embedar (incorporar) no seu site clique em Concluído e clique nas opções do mapa (ícone de três pontinhos ao lado de Compartilhar. Então clique em Incorporar a meu site. Copie o código e pronto.

    

    Ajustes

21. Edite as informações do balão (infowindow, tooltip) que aparece quando você clica em um ponto. Por padrão, todos os campos da tabela original ficam visíveis. Você pode clicar no ponto, no ícone de editar (lápis) e desmarcar os que não interessarem.

    

    

22. Se depois de inserido no seu site, o mapa não ficou como queria, veja aqui como fazer ajustes: http://dadosfinos.blogspot.com.br/2015/05/como-criar-mapas-com-google-maps.html#ajustes

Dados usados no vídeo

A prefeitura de Curitiba publica na página de dados abertos uma tabela de solicitações feita no telefone 156 nos últimos 3 meses:

http://www.curitiba.pr.gov.br/dadosabertos

Utilizamos um recorte dessa tabela só contendo alagamentos. Você pode baixá-la aqui, na pasta Cidade:

Gazeta do Povo Dados

Veja também

Como criar mapas de um ponto só ou de trajetos

http://dadosfinos.blogspot.com.br/2015/05/como-criar-mapas-com-google-maps.html

Faça ajustes no código de embed do Google Maps

http://dadosfinos.blogspot.com.br/2015/05/como-criar-mapas-com-google-maps.html#ajustes

Tem um local no mapa que não tem endereço? Veja como capturar as coordenadas

http://dadosfinos.blogspot.com.br/2015/04/coordenadas-no-google-maps.html

Mais endereços do que o Google Maps suporta? Veja como localizar muitos endereços com o Google FusionTables

http://dadosfinos.blogspot.com.br/2014/05/fusion-tables-conferir-e-editar.html

Como criar mapas personalizados com Google Maps

Veja três jeitos fáceis de criar e incorporar (embed) um mapa personalizado com Google Maps e a ferramenta MyMaps:
1. Mapa rápido sem pontos
2. Mapa rápido de um ponto só
3. Mapa de pontos ou trajetos (My Maps, exige login)
–
Ajustes no código de embed

---

1. Mapa rápido sem pontos

Este mapa é feito sem precisar logar em uma conta google. Use para mostrar uma região do mapa ou do modo StreetView, não vai aparecer o pino do Google Maps.

1. Entre no site: http://ctrlq.org/maps/embed/
2. O código fica o tempo todo aparente.
3. Altere o mapa (arraste, dê zoom, escolha o modo Satélite, arraste o bonequinho para entrar no StreetView…)
4. Copie o código

http://ctrlq.org/maps/embed/

2. Mapa rápido de um ponto só

Este mapa é feito sem precisar logar em uma conta google.

1. Entrar no Google Maps e procurar um local / endereço
   
2. Clicar na engrenagem de Configurações e “Compartilhar ou incorporar mapa”
   
3. Clicar na aba “Incorporar mapa”
   
4. Escolher o tamanho (pequeno ou médio)
5. Copiar código para incorporar (<iframe…)
   <iframe frameborder="0" height="300" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1801.6374966341696!2d-49.27116788257183!3d-25.429068296929362!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94dce412dc528187%3A0xb8293d0094848d2b!2sPra%C3%A7a+Tiradentes+-+Centro%2C+Matriz%2C+Curitiba+-+PR!5e0!3m2!1spt-BR!2sbr!4v1432239932719" style="border: 0;" width="400"></iframe>

3. Mapas de pontos ou trajetos

Aqui você vai precisar fazer login em uma conta google. O mapa vai estar associado a essa conta e vai ser possível editá-lo depois.
Vantagens:

• Possível adicionar mais de um ponto
• Possível adicionar ponto, trajeto ou polígono (área)
• Adicionar mais de uma layer de dados
• Salvar e editar o mapa
• Definir visualização inicial (zoom e posição do mapa)
• Localizar pontos a partir de uma tabela

Criar um mapa personalizado com o Google My Maps:

1. Login com sua conta no google
2. Clique na caixa de busca até aparecer “Meus mapas”
   
3. Clique em “Criar”
   
4. Adicione nome e descrição
   
5. Essa é a tela de edição do mapa. O Importar serve para puxar vários locais ao mesmo tempo, usando uma tabela já pronta, ou um arquivo KML. As ferramentas abaixo da caixa de busca são para desenhar diretamente em cima do mapa.
   

Adicionar pontos no mapa

1. Encontre o local desejado. Pode usar a caixa de busca pra isso, ou ir manualmente até achar.
2. Clique no pino que está na barra de ferramentas
   
3. Clique no mapa para criá-lo. Somente após “Salvar” o ponto será inserido de fato no mapa. Depois disso ele aparece no painel de layers (camadas). Para editá-lo, você pode selecioná-lo através do painel, ou clicando em cima dele no mapa.
   

Publicar (incorporar) mapa

1. Terminada a edição, clique nos 3 pontinhos de configurações. As do mapa, mais acima, não da camada. E depois em “Incorporar a meu site”
   
2. Você vai ter que deixar o mapa público antes disso.
   
3. Confirme nome e descrição. Clique em “Quem pode acessar” > “Alterar”. E marque “Público na Web”
   
4. Copiar código para incorporar. (Se não aparecer, repita o passo 1 após deixar o mapa público)
   

Ajustes e edição do código de incorporação

Entenda o código

1. O código para incorporar (embed) vai se parecer com isso:
   <iframe src="https://www.google.com/maps/d/u/0/embed?mid=z3IfIMDeTAjk.k0u39Vy5MnHw" width="640" height="480" ></iframe>
   Esse tipo de código html (com a tag iframe) nada mais é que uma janela que referencia um conteúdo que está em outro lugar. Ao copiar o código, você não copia o mapa, o mapa está no Google Maps (e, nesse caso, associado à conta que você usou para criar o mapa).
2. O código copiado só vai criar essa janela que aponta para outro lugar. O elemento src="www.endereço…" é a fonte (source) do conteúdo. E os elementos width e height definem o tamanho da janela, em pixels (não precisa escrever a unidade).
3. A ordem dos elementos não importa. Basta que estejam dentro da tag de abertura:
   <iframe AQUI VÃO OS AJUSTES ></iframe>
4. Para alterar as dimensões do mapa, altere o valor dos elementos width e height. Se o código veio sem esses elementos, pode copiar daqui e inserí-los no seu código, logo após as aspas finais do elemento src.

Elimine a borda

• Elimine a borda do mapa, que vem por padrão. Adicione o elemento frameborder="0" logo após as últimas aspas do código. Vai ficar assim:
  <iframe src="https://www.google.com/maps/d/u/0/embed?mid=z3IfIMDeTAjk.k0u39Vy5MnHw" width="640" height="480" frameborder="0" ></iframe>

Para mapas em largura inteira

1. Altere a largura (width) para 100%. Vai ficar assim:
   <iframe src="https://www.google.com/maps/d/u/0/embed?mid=z3IfIMDeTAjk.k0u39Vy5MnHw" height="300" width="100%" frameborder="0" ></iframe>
   Nesse caso eu também ajustei um pouco a altura (para 300).
2. Resultado final publicado:

Para mapas em meia largura

1. Altere a largura (width) para 315.
   <iframe src="https://www.google.com/maps/d/u/0/embed?mid=z3IfIMDeTAjk.k0u39Vy5MnHw" frameborder="0" height="300" width="315" style="float: left; margin: 10px 20px 20px 0" ></iframe>
2. Adicione um ajuste de estilo para que o texto possa correr ao lado do mapa:
   style="float: left; margin: 10px 20px 20px 0"
   Vai ficar assim:
   <iframe src="https://www.google.com/maps/d/u/0/embed?mid=z3IfIMDeTAjk.k0u39Vy5MnHw" height="300" width="315" frameborder="0" style="float: left; margin: 10px 20px 20px 0"></iframe>
3. E o resultado final publicado:

Lorem impsum início de matéria  de logro, seguida por um enfado visceral, que o crítico percorre a sa100 poética de nono. Mais do que nunca, a poesia é hoje um produto apenas para consumo próprio, ou, 200 ndo muito, para consumo familiar – penso nas famílias espirituais, pequenas mas intransigentes n300 seus gostos como todas as famílias. Depois da messe cansativa, restam apenas esparsas espigas. S400 l do fim dos tempos? Não podemos ser tão fatalistas. É apenas a rotina de um tempo de fezes e ma500 poemas – como diria Escolhendo livros ao acaso nas prateleiras da livraria, juntei se600 ítulos que dão uma eloqüente amostragem da arte de não escrever. Lidos com o tédio característico 700 quem se vê pressionado pelo desejo de compreender, os poemas ficaram ainda mais intragáveis. Co800 tá-los é então um compromisso profissional.
Intertitulo

Ajuste de zoom e posição inicial do mapa

Pode ser que o mapa não inicie de um jeito legal. Pode ser muito próximo ou muito distante. Se você criou o código usando o “Meus mapas” você pode ajustar isso:

1. Volte no mapa editável
2. Ajuste a posição do mapa, como você deseja que ele abra pro leitor.
3. Clique nos 3 pontinhos de configurações (as do mapa, mais acima, não da camada)
4. Clique em “Definir visualização padrão”
5. Pronto. Não precisa fazer nenhum ajuste no código. (Ao incluir pontos novos, editar o nome ou posição dos pontos também não)

Coordenadas no Google Maps

Como encontrar as coordenadas de um local

1. Busque um endereço ou aproxime o local desejado
2. Clique com o botão direito > O que há aqui?
3. Pronto. Próximo à caixa de buscas, abaixo do endereço vai aparecer o par de coordenadas (LatLong), em formato decimal.

• Se clicar em cima das coordenadas (elas são um link), o Maps faz o mesmo que faria se você tivesse colado as coordenadas na caixa de busca: aproxima do local e também mostra o par de coordenadas em um formato diferente (DMS: graus, minutos e segundos)

Como encontrar um local a partir das coordenadas

O formato que o Google Maps usa para coordenadas é o seguinte:

YY.YYYY, XX.XXXX

Sendo:

Y=Latitude

X=Longitude

Vírgula para separar os dois números

Ponto como divisor de números inteiros e decimais (ao invés da vírgula que usamos como padrão no Brasil)

É só colar na caixa de busca um par de coordenadas nesse formato que a busca vai dar certo.

Veja também

Como converter coordenadas

Converter apenas uma coordenada

Converter uma lista de coordenadas

Outras operações com coordenadas

http://dadosfinos.blogspot.com.br/p/mapear.html#coordenadas

Como localizar muitos endereços com FusionTables

http://dadosfinos.blogspot.com.br/2014/05/fusion-tables-conferir-e-editar.html