Adicionando mapas do Google Maps em artigos no Joomla
Essa é uma dica para quem quer adicionar de maneira prática e rápida um mapa do Google Maps em algum artigo no joomla.
Vamos inserir o mapa utilizando o iframe. Para isso instala e um plugin chamado Mosiframe.
Vamos inserir o mapa utilizando o iframe. Para isso instala e um plugin chamado Mosiframe.
Para adicionar um mapa do google maps em um artigo, é preciso seguir um procedimento, vamos ao exemplo, adicionar um mapa com um ponto em especifico, Campinas. Primeiro, ir ao google maps em:
Ir na barra de busca e localizar o local desejado, depois que o mapa tiver sido carregado, clique no botão a esquerda chamado “Link”, então copie o código que aparece no campo marcado com a seta vermelha abaixo:
Copie esse código e o jogue em um editor de texto, como o bloco de notas, assim o código em questão é o que está abaixo, a parte que vamos usar está destacada em vermelho, muito cuidado nessa hora para não copiar a parte do código errada:
<iframe width="500" height="700" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=pt-BR&geocode=&q=campinas&ie=UTF8&z=11&iwloc=addr&ll=-22.830618,-47.027664&output=embed&s=AARTsJqGAwmJFyUKLTOaJYk9vj681f-uoA"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&source=embed&hl=pt-BR&geocode=&q=campinas&ie=UTF8&z=11&iwloc=addr&ll=-22.830618,-47.027664" style="color:#0000FF;text-align:left">Exibir mapa ampliado</a></small>
Depois que esse trecho estiver copiado, volte ao artigo que estava fazendo no joomla escolha a parte do artigo em que vai colocar o mapa, depois de escolhido digite:
{iframe}{/iframe}
Coloque o código depois de {iframe} e no final do código coloque {/iframe}
Assim o resultado final seria esse:
{iframe}http://maps.google.com/maps?f=q&source=s_q&hl=pt-BR&geocode=&q=campinas&ie=UTF8&z=11&iwloc=addr&ll=-22.830618,-47.027664&output=embed&s=AARTsJqGAwmJFyUKLTOaJYk9vj681f-uoA"{/iframe}
Destaquei em negrito as palavras que devem ficar no inicio e no final do código, não se esqueça disso.
Basta salvar o artigo, e quando ele for acessado pelo site, o mapa aparecerá.
valeu amigão! se precisar conte comigo! www.marcosw.com
ResponderExcluirabs,
Vlw cara! De tanto mexer achei tmb uma forma de colocar ele personalizado, ex:
ResponderExcluirClica-se em link, na janelinha que se expande tem logo abaixo: Personalizar e visualizar mapa incorporado.
Ao clicar nele vc pode personalizar tamanho, aproximação, etc. Bom, vamos ao mapa que eu customizei, ficou assim:
Infelizmente não deu pra colar o código lah do google aqui, ficou dando erro. Mas analise abaixo e vejam se conseguem. :/
Código resumido e funcional ficou assim:
{iframe width="425" height="350"}http://maps.google.com.br/maps?f=q&source=s_q&hl=pt-BR&geocode=&q=joao+pessoa+-+pb&sll=-14.179186,-50.449219&sspn=68.70707,113.203125&ie=UTF8&s=AARTsJrQCOO1qkuK1aBp395jeJmC2S9DUw&ll=-7.112306,-34.862537&spn=0.059619,0.072956&z=13&output=embed{/iframe}
Compare, veja o que foi removido e aproveitem mais dessa excelente função.
Vlw!
muito bom, deu certo aqui.
ResponderExcluirOlá.
ResponderExcluirCaros amigos, vejam se podem me dar uma dica por gentileza.
utilizei o Mosiframe, ele aparece o mapa google maps geral mas não no endereço que eu quero.
testei como trecho do programa apresentado aqui no blog, funciona.
Minha dúvida é, se eu for no google maps e copiar o código no Link a direita, o meu código para no &output=embed e não assim &output=embed&=AARTsJqGAwmJFyUKLTOaJYk9vj681f-uoA como no seu código, porque?
O meu código ficou assim:
ResponderExcluir{iframe}http://maps.google.com.br/maps?f=q&source=s_q&hl=pt-BR&geocode=&q=Rua+do+Couto,+296,+Penha,+Rio+de+Janeiro&sll=-14.179186,-50.449219&sspn=106.238209,101.425781&ie=UTF8&hq=&hnear=R.+do+Couto,+296+-+Penha,+Rio+de+Janeiro,+21020-410&ll=-22.834282,-43.273444&spn=0.014792,0.019205&z=14&output=embed"{/iframe}
Mas o que aparece é a pagina do Google e não o mapar que copiei o link como orientou em sua matéria.
Por favor. No que que eu errei?
bakaca; gostei; funcionou, porem só tem q especificar melhor qual parte do codigo devemos usar; + no final funcionou; valew; jr
ResponderExcluirDepois que instalar o plugin vá no gerenciador de plugin e ative-o
ResponderExcluirseu site devera funcionar agora!
o mapa nao apareceu pra mim só uma caixa vazia
ResponderExcluir