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