Como colocar o mapa do Google em uma página

Nosso primeiro artigo da categoria Saber isso vale dinheiro é como colocar o mapa do Google em uma página, trabalho com manutenção de sites há muito tempo e existem coisas muito simples que os clientes me pedem para fazer que eles mesmos poderiam colocar em seus sites.

Criei essa categoria de artigos principalmente para passar informações úteis e que tem valor de mercado, já que são tarefas para as quais recebo para fazer.

Quando os clientes solicitam que eu coloque um mapa do Google em uma página, normalmente cobro uma hora técnica, que para mim é R$ 60,00, obviamente não levo uma hora para fazer isso, mas é um valor de referência para você saber o quanto vale esse serviço e como fazer.

Aqui vamos tratar apenas da possibilidade do seu site já ser em WordPress, caso ele use outro CMS a lógica é basicamente a mesma, caso seu site seja feito diretamente em HTML, PHP ou ASP, vai exigir um pouco mais de conhecimento de programação, o que torna as coisas mais complicadas, não abordaremos esses casos aqui.

Existem algumas maneiras de colocar o mapa do Google em uma página no WordPress, você pode usar um plugin para fazer isso, existem vários disponíveis, porém pessoalmente penso que não é necessário, plugins são excelentes formas de agregar recursos ao seu site, porém é importante lembrar que, quanto mais plugins seu site tem, mais lento ele fica. então devem ser usados com inteligência.

Vamos começar com um endereço, no caso eu quero fazer um mapa para a Praça Tiradentes em Curitiba, vou no Google Maps e digito o endereço na barra, o resultado deve ficar parecido com o da imagem abaixo.

Como colocar o mapa do Google em uma página

Após carregar o mapa com o endereço que eu quero colocar, uso a opção Compartilhar, que está nas opções do lado esquerdo. Na sequência ele vai abrir um popup com algumas opções, a primeira tela é Compartilhar Link, usamos esse link para enviar essa localização para alguém. A que nós queremos nesse exemplo é Incorporar Mapa, que deve ficar igual o exemplo abaixo.

Como colocar o mapa do Google em uma página

 

Existem algumas opções de tamanho de mapa para você colocar o mapa do Google em uma página:

Pequeno: Largura 400 px / Altura 300 px.

Médio: Largura 600 px / Altura 450 px.

Grande: Largura 800px / Altura 600 px.

E também o tamanho personalizado, onde você pode escolher a largura e altura, se você não sabe o tamanho certo para sua página, sugiro colocar o tamanho médio, e se sobrar ou faltar, usar o tamanho personalizado editando as medidas de altura e largura.

Em nosso caso, vamos fazer um tamanho personalizado, eu sei que o meu site tem uma área útil de 760 px de largura para a maioria dos posts que faço, então vou usar essa medida de largura. Para definir a altura, vou tentar fazer algo proporcional, para isso usamos um fator de multiplicação de 0,75, isso nos dá um valor que é 3/4 menor que a largura, esta é a medida da proporção dos modelos do Google para pequeno, médio e grande.

Então multiplicamos 760 por 0,75, o que resulta em 570 px de altura para manter a proporção. Então selecionamos a opção tamanho personalizado e entramos com as medidas, o resultado deve ser igual ao da imagem abaixo.

Como colocar o mapa do Google em uma página

Você pode clicar no link ao lado “VISUALIZAR TAMANHO REAL” para ver como o seu mapa ficou, logo abaixo você vai ver uma caixa com um código gerado pelo Google, copie todo esse código, no nosso exemplo o código é:

<iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3603.255870090522!2d-49.274185848974966!3d-25.429707839030126!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x94dce412dff59995%3A0xd9646675e5a8bb20!2sPra%C3%A7a+Tiradentes!5e0!3m2!1spt-BR!2sbr!4v1503496516838″ width=”760″ height=”570″ frameborder=”0″ style=”border:0″ allowfullscreen></iframe>

E com o código copiado, nós simplesmente colamos em nosso post, mas o detalhe aqui é que colamos na opção de texto do WordPress, como na imagem abaixo.

Como colocar o mapa do Google em uma página

Ele vai abrir uma tela com o código fonte do seu posts, a maior parte do texto vai ser HTML, no caso nós vamos até o final da página e colamos o nosso código lá para que o mapa funcione.

Como colocar o mapa do Google em uma página

Depois que você colocar o mapa do Google em uma página, ele vai ser incorporado exatamente como está abaixo:

 

Gostou desse artigo? Sugiro que veja também Como funciona a busca do Google, vai ajudar você a melhorar o posicionamento do seu site no ranking do Google

Sem avaliações ainda, seja o primeiro

Avalie nosso artigo

Comentários