Neste artigo, mostrarei como adicionar um mapa responsivo do Google Maps a uma página do WordPress (ou seja, para uma página de contato) sem usar um plug-in. Estarei usando o WordPress 6.0 para este tutorial, bem como o tema Twenty Twenty Two, que é o tema padrão para esta versão do WordPress.

 O recurso do Google Maps permite que você exiba a localização de sua empresa em um mapa interativo, permitindo que os visitantes do site visualizem facilmente onde você está e interajam com o mapa para ver o que mais está ao seu redor, obter direções etc. Ele demonstra aos visitantes do site que você é uma empresa local e tem uma localização física real. É muito comum que as empresas tenham um mapa em sua página de contato.

Existem muitos plug-ins do Google Maps por aí, mas muitos deles são desajeitados e exigem pagamento pelos recursos completos do plug-in ou uma conta de desenvolvedor do Google com etapas complicadas que produzem um resultado abaixo do desejável.

Tudo isso dito, existe uma maneira muito simples de adicionar o Google Maps às suas páginas do WordPress 6.0 sem plugins e sem um monte de etapas complicadas. Vamos mergulhar nele.

Conteúdo

Etapa 1: criar um bloco HTML

Para começar, faça login na área de administração do seu site WordPress e navegue até a seção “Páginas” (seta vermelha na imagem acima).

Clique na página à qual deseja adicionar seu recurso do Google Maps (você pode clicar no nome da página, no meu caso “Contato” – seta azul na imagem acima – ou simplesmente clicar em “Editar” abaixo do nome da página).

Se você estiver usando um tema de bloco como o Twenty Twenty Two, agora você estará dentro do Editor de Blocos da sua página. Role para baixo até o local onde deseja inserir seu mapa.

Em seguida, clique no ícone “+” (o “Block Inserter” – seta vermelha na imagem acima) para inserir um bloco.

Procure por “Grupo” no campo de busca (destacado em verde na foto) e clique para adicionar o bloco de grupo (seta vermelha). Isso permitirá que você adicione algumas configurações personalizadas ao elemento de bloco.

Por exemplo, clique na opção “Alterar alinhamento” (seta vermelha) e selecione “Largura total” (seta verde). Isso fará com que a largura do bloco que conterá nosso mapa interativo do Google Maps seja de largura total.

Em seguida, clique no botão grande “+” dentro do grupo (seta vermelha na foto acima). Procure por “HTML” na barra de pesquisa (destacada em verde) e clique no bloco “Custom HTML” (seta azul).

Você verá que agora diz “Write html…” (seta vermelha). É aqui que adicionaremos nosso mapa.

WordPress simplificado: curso como construir sites poderosos, por Davies Media Design

Etapa 2: gerar o HTML incorporado do Google Maps

Agora precisaremos gerar nosso mapa com o Google Maps. Para fazer isso, abra uma nova guia do navegador e navegue até Google.com se não for seu navegador de pesquisa padrão.

Em seguida, digite o endereço que deseja exibir em seu mapa. Para este exemplo, usarei o Empire State Building (seta vermelha). Você pode usar o endereço exato da sua empresa para essa parte (ou seja, número da rua, rua, cidade, estado e CEP – ou o que você digitar para endereços internacionais se não estiver nos EUA).

Clique na imagem do mapa que aparece para o seu endereço na página de resultados do mecanismo de pesquisa (seta vermelha na imagem – ela estará no meio da página ou à direita, dependendo se você digitou um endereço ou o nome de um lugar, como eu fiz).

Seu endereço agora aparecerá como um marcador no mapa em tela cheia (seta vermelha na imagem acima). Você também verá vários ícones abaixo do endereço ou título do lugar que pesquisou. Esses ícones incluem “Rotas”, “Salvar”, “Perto”, “Enviar para telefone” e “Compartilhar”. Clique no ícone “Compartilhar” (seta azul).

Na aba “Compartilhar” que aparece, clique na aba “Incorporar um Mapa” (seta azul na foto acima).  

Nesta guia, você verá uma visualização do widget incorporado do Google Maps. Há uma lista suspensa de tamanho no lado esquerdo do código (seta verde) – você pode selecionar um tamanho pré-definido ou escolher “Personalizado” para definir seu próprio tamanho. Vou selecionar a opção “Personalizado” (seta vermelha).

Aqui, você verá as dimensões do meu mapa personalizado. Vou definir a altura, ou a primeira dimensão, para 1200 (seta vermelha). Vou deixar a largura definida para 600. Você pode clicar em "Visualizar tamanho real" (seta verde) para mostrar o mapa em uma nova janela pop-up em tamanho real (certifique-se de desativar quaisquer bloqueadores de pop-up se os tiver ligado para evitar bloquear a janela). Saia da janela de visualização quando terminar.

Em seguida, clique no link “Copiar HTML” (seta azul). Este é o código que traremos para nossa página do WordPress.

Etapa 3: cole o código HTML na página do WordPress

Navegue de volta para a guia do navegador que contém seu site WordPress. Clique no bloco HTML vazio onde está escrito “Write HTML here…” e cole o código (seta vermelha) pressionando ctrl+v no seu teclado (cmd+v em um mac).

Se você clicar na opção “Visualizar” na barra de ferramentas do bloco (seta vermelha), agora verá seu mapa exibido em sua página (seta verde). Clique novamente na opção “HTML” para retornar ao código HTML (seta azul).

Temos nosso mapa embutido em nossa página, mas não é responsivo – ou seja, se visualizarmos o mapa em uma tela menor, como um tablet ou telefone, ele não ajustará seu tamanho para caber na tela. Para corrigir isso, precisamos adicionar algum estilo personalizado ao código HTML.

Etapa 4: tornar o Google Maps responsivo

eu serei usando o código que eu peguei deste site para tornar a incorporação do Google Maps responsiva. Role para baixo até a seção “Como incorporar o Google Maps de forma responsiva” (seta vermelha). Em seguida, role para baixo até o segundo conjunto de código (seta azul).

Copie tudo de “ ”  to “” by highlighting the code with your mouse and hitting ctrl+c on your keyboard (cmd+c on a MAC – red arrow in the image above).

Navegue de volta para o WordPress. Clique com o mouse bem na frente do código HTML para inserir esse novo código no início (seta vermelha). Pressione ctrl+v para colar seu código.

Por fim, clique no final do código HTML (seta vermelha) e digite “ ” para fechar tudo. Basicamente, o que você acabou de fazer foi envolver seu código HTML em um estilo personalizado. Esse estilo informa ao navegador do visitante para redimensionar o mapa com base no tamanho da janela em que o está visualizando.

Etapa 5: ajuste a proporção do mapa interativo

Há uma última coisa que precisamos fazer - rolar de volta para o topo do código até ver "padding-bottom: 75%;" (flecha Vermelha). Este pedaço de código está determinando a proporção do mapa.

Como redimensionei meu mapa para 1200 x 600, ele tem uma proporção de 2:1. Para isso, preciso alterar o percentual para “50%” (seta vermelha).

Se você não tiver certeza de qual porcentagem você deve usar para o seu mapa, simplesmente pegue a proporção (ou seja, 16:9) e divida o segundo número pelo primeiro para obter sua porcentagem (9 dividido por 16 é 56.25%).

Clique em “Atualizar” para aplicar suas alterações (seta azul na imagem acima) e clique em “Visualizar página” no canto inferior esquerdo para ver o resultado.

Agora você deve ver seu widget do Google Maps exibido (seta vermelha na imagem acima).

Você pode testar a capacidade de resposta diminuindo o tamanho do seu navegador e, em seguida, rolando de volta para a área da página da Web que contém o mapa.

Isso é tudo para este tutorial! Se você gostou e quer aprender a fazer seu próprio site profissional WordPress do zero, você pode se inscrever no meu WordPress simplificado: curso como construir sites poderosos na Udemy, ou confira meu outro Tutoriais do WordPress!

Boletim informativo por e-mail de aplicativos criativos gratuitos da Davies Media Design

Assine o boletim informativo DMD

Inscreva-se para receber novos tutoriais, atualizações de cursos e as últimas notícias sobre seus aplicativos criativos gratuitos favoritos!

Você se inscreveu com sucesso!

Pin It on Pinterest