quinta-feira, 26 de novembro de 2009

Como colocar mapas do Google Maps em seu blog

Sobre isso, já publicamos um tutorial em alguma parte do Flanar. Mas o post, simplesmente remetia a outro tutorial em inglês. Por esta razão, resolvemos fazer o nosso próprio passo-a-passo, utilizando capturas de tela ilustrando o processo de montagem deste mesmo post.
Em resumo, a exemplo do processo de adição de vídeos do You Tube no seu blog, tudo o que você precisa é obter o código "embbed", ou código "incorporar" associado ao alvo que você deseja mostrar no mapa. Vamos agora explicar como obtê-lo e em seguida, adicioná-lo ao seu post. O processo explicado aqui, serve ao Blogger. Usuários de Wordpress e outras plataformas, terão que descobrir como fazê-lo.

1) Vá até o Google Maps
2) Utilizando os controles da ferramenta, escolha o "alvo" a ser adicionado a seu blog. Neste caso, escolhemos esta visão panorâmica de Belém.

3) Observe na barra azul acima do mapa, os seguintes ítens: "imprimir", "enviar" e "link". Clique em "link".
4) Observe que surgem 2 opções de código. Escolha a segunda, ou seja, "Colar HTML para incorporar ao website". Selecione TODO o código, dê um CTRL + C e vá até o passo seguinte.
5) Abra o seu Blogger Painel e inicie uma nova postagem.
6) Observe que a janela de postagem possue 2 abas: "Editar HTML" e "Escrever". A aba "Escrever" é a que normalmente utilizamos para fazer nossos textos. E ela deve ser utilizada normalmente, para fazer o texto do post que ampara o mapa que você vai incluir a seguir. É muito importante saber a diferença entre uma e outra para acertar direitinho este tutorial.
Quando, utlizamos a aba "Escrever", aqui só vale texto puro. Nenhum código que execute a mágica de fazer funcionar uma animação, vídeo ou mapa, vai funcionar, se ele for digitado nesta aba.
7) Agora vamos fazer aparecer o mapa. Neste ponto, paro de utilizar a aba "Escrever" e clico na aba "Editar HTML".
Procuro em meio ao texto recheado de "tags" e outras marcações, o ponto exato em que desejo colar o código "embbed" obtido no Google Maps. E defino então que ele deverá ser colocado aqui. Digito então CTRL+V, para colar o código copiado no ítem 4.
8) Clico novamente na aba "Escrever", e possivelmente, já poderei ver o mapa adicionado ao meu texto.
9) Ainda na aba "Escrever", posso continuar a desenvolver texto embaixo do mapa, exatamente como estou fazendo agora.

Prontinho! Simples, não?

7 comentários:

Anônimo disse...

Beleza,CB.Funciona.
Obrigado pela valiosa dica geosensoratica graficatica editorialista.com.br , da rede Flanar de Comunication Incorporation.
Valeu!!
R.Sampaio

Carlos Barretto disse...

Rsssss
Grande aviador.
Pensei que pra vc, isso fosse "sopa no mel".

Abs

Anônimo disse...

Como dizia o Mestre Juca : " Sou semi analfa-micro. Sei navegar mas nao alimentar essa parafernalia toda de hoje em dia. Tipo o saudoso amigo, minha cabeca eh analogica demais para essa diditalidade toda.Meu "pentium" eh dos anos 60,CMTe. rss
Bue Sky and soft lands,CB.

Carlos Barretto disse...

"As usual", RS.
Volte sempre!

Lafayette disse...

Pô, agora que sou um Blogger, vou deitar e rolar!

Valeu Barreto!

zahlouth disse...

Obrigados pelas preciosas dicas.

Carlos Barretto disse...

Obrigado pela visita.
Aproveite bem as dicas.

Abs