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.

Exibir mapa ampliado

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?