Skip to content

Como inserir e exibir o GOOGLE MAPS em um site? (Exemplo)

19 de abril de 2021

Já aconteceu com você que você quer insira o Google Maps em um site e você não sabe como? Não se preocupe, é um processo fácil e rápido que você aprenderá a desenvolver aqui.

É muito comum que, ao postar informações que incluem um endereço, saltemos para procurá-lo manualmente no Google Maps, o que às vezes gera confusão ou erros.

Quem não aconteceu que você procurou o endereço errado e acabou no lugar errado. Bem, isso não será mais um problema. Com este passo a passo você pode inserir e mostrar o Google Maps com o endereço que deseja em seu site.

É tão simples quanto colocar etiquetas nos endereços de lugares no Google Maps ou criar, adicionar e organizar legendas no Google Maps.

A partir de agora não será um problema mostrar aos visitantes do seu site onde está localizado aquele novo parque que você visitou e amou. Ou talvez você seja proprietário de uma empresa e queira que seu endereço seja listado para que todos possam visitá-lo.

O uso é com você. Cuidamos para mostrar a melhor forma de gerar, inserir e exibir o mapa de que você precisa em seu site.

Gere o mapa do Google Maps

Para inserir o Google Maps em um site, por exemplo, em plataformas como o WordPress, devemos pesquisar no Maps o endereço que desejamos que seja exibido em primeira instância em nossa página. Claro, você deve primeiro fazer login no Google ao abrir o Chrome.

Tendo localizado o endereço, selecionamos a opção “Compartilhar” na qual veremos duas abas. Vamos escolher aquele que se adapta ao nosso desejo “Incorporar um mapa”.

Estando nesta guia, teremos um visualização do mapa com endereço que procuramos em destaque.

Você poderá perceber que o mapa é editável, ou seja, você pode mover o ponto focal para o lado que deseja que seja percebido. Assim será visualizado após a inserção no nosso site.

Além disso, você terá a oportunidade de decidir entre diferentes tamanhos de mapa, para que possa selecionar aquele que funciona melhor para você. Você pode até escolher o tamanho personalizado, no qual você deve inserir os valores.

Tendo o mapa como desejamos, iremos para copie a informação que encontraremos na parte inferior da janela. Este é o código individual do mapa.

Como inserir o mapa do Google Maps

Tendo o código do mapa, começaremos a inserir o Google Maps em um site. Neste caso, mostraremos passo a passo como fazê-lo no WordPress, embora é muito semelhante em outros gerenciadores de conteúdo (CMS).

Iremos ao posto onde queremos ter o mapa, na parte de edição. No topo, vamos para o modo “HTML”.

inserir mapa

Nesta opção, iremos colar o endereço que extraímos do mapa. Exatamente onde queremos que o mapa seja visto.

Depois disso, se voltarmos ao modo “Visual”, perceberemos onde inserimos o mapa. Não se esqueça de salvar a postagem.

E pronto, o mapa está incluído corretamente em nossa publicação. O melhor é que este é um mapa interativo, que inclui todas as opções do próprio Maps.

Gerar um mapa sem CMS

Caso você queira gerar um mapa que não será utilizado em sites com gerenciadores de conteúdo, o processo é um pouco menos simples.

Devemos criar uma pasta, na qual encontraremos um “Documento de texto” (.txt) com o nome que você quiser.

A seguir, abriremos o .txt com o “Editor de Código” de preferência. Um HTML5 deve ser gerado, seguido por um HTLM2.5.

No resultado disso, colocaremos o código do mapa no “Corpo”. E damos “Salvar”.

Ao abrir este documento em um navegador, veremos o mapa totalmente interativo e em uma guia individual.

Podemos inserir ou compartilhar onde quisermos e sempre que for executado em um navegador, ele nos mostrará o mapa com o endereço e as características que já configuramos.