quarta-feira, 6 de agosto de 2008

Colocando um mapa do Google Maps em seu blog/site

Hoje faremos um tutorial bem interessante. Quantas pessoas não quizeram alguma vez colocar um mapa em seus blogs para indicar em algum post trajetos de viagem, locais visitados ou mesmo alguma referência geográfica citada em algum post.

Eu mesmo já havia pensado em fazer isso no começo do ano, quando tentei viajar de moto e minha viagem acabou me tornando uma vítima infeliz do barro da época chuvosa do começo do ano. De lá para cá, havia aprimorado a idéia até que então eu achei um tutorial sobre como usar o maps e estou colocando aqui uma tradução para o mesmo. Espero que gostem.

How to insert a map in your blog (Como colocar um mapa em seu blog)

Bom, minha tradução não será literalmente igual à do site por motivos óbvios. No entanto, grande parte do que eu postar será baseado no texto do site original. Como está dito no prólogo do tutorial, nem o Google ou o Blogger autorizam oficialmente esta implementação. Vamos então ao texto.

Seguindo estes passos básicos, você poderá publicar um mapa do Google Maps diretamente em seu blog, sem muita dificuldade. Isso pode ser feito tanto nas partes estáticas do blog quanto em posts e - acredito eu - em comentários. Não é necessário ter experiência em programação prévio, já que os passos são bem simples de serem seguidos. Se você consegue criar um link em seu blog, com cerveja certeza você conseguirá colocar um mapa em seus posts.



Primeira Parte - Prepare seu mapa

Antes de mais nada, você precisa definir alguns parâmetros relacionados à porção do mapa a ser exibido:
  • Escolher as coordenadas (latitude, longitude);
  • Configurar o zoom (0 .. 17);
  • Dimensões do mapa (largura, altura) em pixels;
  • Tipo do mapa (Mapa, Satélite, Híbrido).

Você também pode setar:
  • Botões de navegação;
  • Régua de Zoom ou os Controles Simplificados.

As coordenadas e níveis de zoom você pode encontrar no arquivosdoelfo. Os passos, depois disso, são:
  • Encontre a localidade que deseja;
  • Decida o tamanho do mapa;
  • Defina o nível de zoom;
  • Anote as coordenadas.


Segunda parte - Pegue sua Chave da API do Google Maps

Terceira parte - Abra o template de seu blog para edição

Entre na sua ferramenta de blogs e adicione no cabeçalho do modelo a seguinte linha:
<script src="http://maps.google.com/maps?file=api&v=1&key=SuaChaveDaApiDoGoogleMaps" type="text/javascript"></script>


Insira o seguinte código, no final do seu modelo:
<script type="text/javascript">
//<![CDATA[

var map = new GMap(document.getElementById("mapa"));
map.addControl(new GSmallMapControl());
map.setMapType(G_MAP_TYPE) ;
map.centerAndZoom(new GPoint(-48.3319, -10.1823), 4);

//]]>
</script>

Edite os parâmetros a seguir:
  • Altere suas coordenadas e zoom: map.centerAndZoom(new GPoint(-72.585, 42.102), 2);
  • Altere o tipo do mapa: map.setMapType(G_MAP_TYPE); - (G_MAP_TYPE), (G_SATELLITE_TYPE) ou (G_HYBRID_TYPE)
  • Opcional: Adicionar controles de zoom e de navegação: map.addControl(new GSmallMapControl());

Crie uma camada para mostrar o mapa:
<div id="mapa" style="width:300px; height:200px">
map loading...</div>


Quarta Parte - Publicando

Normalmente, tudo vai dar certo. Se você não alterar as configurações de coordenadas e zoom, você irá ter um mapa com a cidade de Palmas, onde moro atualmente. Se o mapa não aparecer para você, pode ser que seu browser não suporte o Maps ou que o Javascript não está habilitado para este endereço.

Quinta Parte - Apontando no mapa

Uma das coisas legais do Maps é você poder fazer várias coisas no mapa, como traçar rotas, apontar coisas, criar balões de informação, entre outros. O mais simples e mais útil até o momento é o apontador, e aqui vai uma solução simples para usá-lo em nosso mapa:
var Etf = new GMarker(new GPoint(-48.3116,-10.1994));
Mapa.addOverlay(Etf);

Estas coordenadas são da Escola Técnica, em Palmas.

Última Parte - Aprenda bastante

Você irá encontrar muito mais coisa sobre o uso do Google Maps e de sua API lendo a documentação oficial. Nesse caso, é necessário conhecimento de Javascript.

Abração povo, espero ter ajudado novamente.