howtos

Como colocar padres no google maps…

girino

Uns post atrás eu postei o fruto de minha atoíce, onde usei uma figura do padre voador com o google maps pra fazer uma espécie de “joguinho”1). Hoje, por falta do que postar, resolvi colocar um pequeno tutorial de…

Como colocar padres no google maps…

Tudo começa com a preparação da imagem. Consiga uma foto do padre voador e “recorte” apenas o pedaço onde está o padre. Dá pra fazer isso no paint, photoshop @ wikipedia.org (en), gimp @ wikipedia.org (en) ou outro programa qualquer que você saiba usar. Eu, pessoalmente, usei o gimp por ser o que tinha a mão2).

O segundo passo complica um pouco, e você não vai mais conseguir fazer no paint: É colocar o fundo transparente. O meu fundo ficou altamente tosco, porque minha coordenação motora e minha paciência são escassas. A idéia é ir marcando o contorno dos balões com a ferramenta para selecionar apenas o que você quer. No gimp, eu fiz assim:

  1. marquei o contorno,
  2. inverti a seleção,
  3. pintei a seleção de uma cor absurda (preto, mas podia ter sido rosa choque ou branco ou burroquando foge),
  4. mandei transformar a cor da seleção em transparente ;),
  5. salvei como gif @ wikipedia.org (en) (ACHO que podia ser png @ wikipedia.org (en), mas não quis arriscar).

ATENÇÃO

Cuidado ao usar imagens protegidas pro direitos autorais @ wikipedia.org (pt)! Existem exceções para o uso de imagens sob proteção dos direitos de autor, como uso educacional, uso para paródias e trabalhos derivados contanto que não tenham fim lucrativo, mas mesmo que você acredite se encaixar nessas situações, tome muito cuidado. Pessoas vivem, pagam seus alugueis e a escola dos filhos com o dinheiro conseguido com imagens e fotografias. Não prejudique essas pessoas. Na dúvida, crie sua própria imagem.

Assim, com a imagem de fundo transparente salva, procedi para o segundo passo: produzir o código javascript @ wikipedia.org (en) que iria colocá-lo no mapa. E essa parte é fácil: existem dúzias e dúzias de exemplos prontos na internet. Basta procurar no google que você acha. Como eu tinha alguma experiência com programar pra google maps, acabei fazendo tudo sozinho mesmo.

Desenvolvimento do javascript…

Este procedimento também tem vários passos 😉 E o primeiro é meramente burocrático: você precisa se registrar no google maps api para conseguir uma “chave” que será usada no seu site. Se você usar uma “chave” destinada a outro site, ela não vai funcionar quando você colocar no seu (apesar de funcionar muito bem quando se roda em arquivos locais, então pra fazer besteirinhas de teste você pode simplesmente copiar uma chave de alguém na internet). Use este link para se cadastrar e conseguir chave: http://code.google.com/apis/maps/signup.html

De posse da chave, vamos preparar nosso arquivo. Comece com um arquivo html normal:

<html>
<head>
<title> meu primeiro mapa </title>
</head>
<body>
   <div id="map_canvas" style="width: 95%; height: 95%; border: 1px solid gray;"></div>
</body>
</html>

Veja que acrescentei uma linha com:

<div id="map_canvas" style="width: 95%; height: 95%; border: 1px solid gray;"></div>

Esta linha cria um “quadro” na página onde seu mapa vai aparecer. O “nome” desse mapa vai ser “map_canvas” (é o nome que vamos usar no javascript para nos referirmos a ele — para que o javascript consiga encontrar esse quadro na tela). De agora em diante vamos começar a usar o google maps, então tenha em mãos sua “chave” obtida anteriormente e substitua todos os XXX-CHAVE-XXX que encontrar pela frente por ela. Sempre que possível vou tentar avisar, mas eu posso esquecer, sabe comé?

Bom, bom, vamos criar o script que “inicializa”3) o mapa. Pra isso precisamos de uma coordenada geográfica. Eu escolhi uma coordenada perto de São Francisco do Sul (olhei a coordenada no google maps de verdade) já que foi por lá que o padre caiu: latitude -27.28, longitude -48.65.

Depois, precisamos acrescentar na nossa página o script que faz isso. Este script tem de ser colocado na área de cabeçalho (entre o <head> e o </head>) do HTML, e depois chamado no “onload” do corpo (<body>) da página:

<html>
<head>
<title> meu primeiro mapa </title>
<script src="http://maps.google.com/maps?file=api&v=2&key=XXX-CHAVE-XXX"
        type="text/javascript"></script>
<script>
function init() {
  var map = new GMap2(document.getElementById("map_canvas"));
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
  map.setCenter(new GLatLng(-26.27, -48.65), 8);
}
</script>
</head>
<body onload="init()">
    <div id="map_canvas" style="width: 95%; height: 95%; border: 1px solid gray;"></div>
</body>
</html>

Eu dividi o código novo todo com cores bem boiolas pra separar as partes (que precisam de explicações separadas ,claro). Tudo começa com o cor de rosa. Esse pedaço é para carregar as funções do google maps. Veja que você precisa inserir sua chave ali (onde está em vermelho, tá vendo?). Feito isso você pode escrever código para google maps dali pra baixo na página!

Depois vem o trecho em verde. Nem sei porque marquei: é só a declaração da função, e só vão ser [uteis as coisas que acontecerem ali dentro. Porquê? tudo por causa dessa linhazinha aqui ó:

<body onload="init()">

que diz que ao carregar a página o seu navegador deve rodar a função chamada “init()”. Vamos então destrinchar essa função! Começando pelo trecho em azul:

  var map = new GMap2(document.getElementById("map_canvas"));
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());

Esse trecho é uma inicialização simples de um mapa do google maps. O que ele faz é simplesmente criar um mapa no quadro que reservamos (“map_canvas”, lembra?) e dar a ele os botõezinhos de zoom (GSmallMapControl) e de mudar o tipo do mapa (GMapTypeControl). Basicamente, todo mapa que você quiser criar você vai fatalmente usar esse mesmo código. A linha em marrom que vem depois:

  map.setCenter(new GLatLng(-26.27, -48.65), 8);

é pra onde mandamos nossas coordenadas de latitude e longitude, lembram? Ela “centraliza” o mapa nessa posição e depois aumenta o zoom para 8 (por isso aquele numero 8 ali). Porque 8? Sei-la, foi o que ficou mais bacana na minha opinião.

De agora em diante, pra não aumentar demais as coisas, vou escrever só o que é realmente relevante. Se eu for copiar a página toda a cada vez vai ficar monstruosamente grande! Então lembrem-se: tudo que eu disser acontece entre as tags de <script> e </script>. Em geral dentro da função init(). Qualquer coisa, no final do artigo eu vou postar o código completo!

Então vamos ao padre. Primeiro vamos inventar uma posição pra ele: latitude -26.35, longitude -48.0. Porque essa posição? Sei-la, porque eu quis, fica perto de são chico do cu sul e cai bem no meio do mar. E então marcamos ele no mapa:

  var point = new GLatLng(-26.35, -48.0);
  var marker = new GMarker(point);
  map.addOverlay(marker);

Viu agora? Ele aparece no meio do mar. Mas ainda não é nosso padreco. Precisamos agora sacar nossa imagem do padreco. Espero que você tenha feito upload dela pra algum lugar, porque vai precisar. A minha está em http://www.girino.org/baloes/baloes.gif. Depois de saber a url da sua imagem, substitua no script que vamos continuar a fazer:

  var icon = new GIcon(G_DEFAULT_ICON);
  icon.image = 'http://www.girino.org/baloes/baloes.gif';
  icon.iconSize = new GSize(50, 80);
  icon.shadowSize = new GSize(60, 80);

  var point = new GLatLng(-26.35, -48.0);
  var marker = new GMarker(point, {icon:icon});
  map.addOverlay(marker);

O que foi feito aqui? Bom, primeiro criamos o icone baseado no padrão (G_DEFAULT_ICON). Depois mudamos a imagem dele pra url do meu upload (você, por favor, coloque a url do SEU upload, tá?). Por fim ajustamos o tamanho do ícone e da sombra do ícone4). Nas linhas que já tinhamso escrito, vamos modificar o pedaço em vermelho: é onde dizemos pro google maps que ele deve usar o MEU icone e não o dele 😉

Nosso padre está quase pronto. Só falta um detalhezinho básico: ele não muda de lugar! Então vamos dar movimento a ele! Vamos habilitar o drag and drop:

  icon.iconAnchor = new GPoint(15, 80);
  icon.imageMap = [0,0,50,0,50,80,0,80];

e também mudando a linha onde criamos o “marker” para acrescentar a propriedade de “drag”:

  var marker = new GMarker(point, { icon : icon, draggable : true });

As primeiras linhas dizem o seguinte: A “base” do meu ícone vai ser no ponto 15×80 da minha imagem (é o ponto que vai corresponder à latitude e longitude, eu tentei colocar bem na base da sombra, mas não consegui direito. você que tiver mais tempo pode brincar mais com esses valores e ver onde fica melhor); e a área “clicável” dele vai ser um polígono delimitado pelos pontos 0x0, 50×0, 50×80, 0x80. Ou seja, um retângulo em volta da imagem. (Mais uma vez, eu sou tosco e preguiçoso, você pode usar outros valores mais precisos se quiser). E por último, a alteração em vermelho diz que nosso ícone é “arrastável”.

Bom, com essas mexidas fizemos um padre voador totalmente funcional usando o google maps 🙂 Abaixo segue o código completo do nosso querido padre:

<html>
<head>
<title> meu primeiro mapa </title>
<script src="http://maps.google.com/maps?file=api&v=2&key=XXX-CHAVE-XXX"
        type="text/javascript"></script>
<script>
function init() {
  var map = new GMap2(document.getElementById("map_canvas"));
  map.addControl(new GSmallMapControl());
  map.addControl(new GMapTypeControl());
  map.setCenter(new GLatLng(-26.27, -48.65), 8);

  var icon = new GIcon(G_DEFAULT_ICON);
  icon.image = 'http://www.girino.org/baloes/baloes.gif';
  icon.iconSize = new GSize(50, 80);
  icon.shadowSize = new GSize(60, 80);

  icon.iconAnchor = new GPoint(15, 80);
  icon.imageMap = [0,0,50,0,50,80,0,80];

  var point = new GLatLng(-26.35, -48.0);
  var marker = new GMarker(point, { icon : icon, draggable : true });
  map.addOverlay(marker);
}
</script>
</head>
<body onload="init()">
    <div id="map_canvas" style="width: 95%; height: 95%; border: 1px solid gray;"></div>
</body>
</html>

References

References
↑1 não é bem um “joguinho” já que não tem nenhum objetivo, é apenas uma brincadeira, digamos assim…
↑2 Eu tenho o gimp no meu pendrive graças ao portable apps.
↑3 sic, mas na falta de um equivalente em português uso isso mesmo
↑4 poderíamos mudar a imagem correspondente à sombra também, mas putz… ia dar um trabalhão criar uma imagem dessas no gimp e eu não sou muito bom de design…

Related Posts

2 thoughts on “Como colocar padres no google maps…”

  1. Interessante..
    Não testei porém você está equivocado quanto o local de caída do padre.. O padre caiu no mar… Essa latitude -27.28, longitude -48.65 é terra firma!

    Reply

  2. @ErikDias
    Err… acho que apenas por mera sorte eu conseguiria acertar a coordenada certa da queda dele, afinal ELE NÃO FOI ENCONTRADO, não é mesmo?

    Mas meu chute da coordenada do padre não é essa coordenada aí. Essa daí é a coordenada do CENTRO do mapa. O padre foi colocado na posição descrita por este trecho do texto:

    Primeiro vamos inventar uma posição pra ele: latitude -26.35, longitude -48.0

    Que, essa sim, é no meio do mar, ao largo de são chico do anus!

    Reply

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.