Divi: como integrar um mapa do Google Maps sem uma chave de API?

Tema Divi - Incorporar mapas do Google
Rank Math - Banner

Deseja integrar um mapa do Google Maps da forma mais simples possível? Trabalhando com um simples código HTML do Divi Builder, esta solução permite dispensar o procedimento de obtenção de uma chave API.

1. Vá para o Google Maps

Você deve então encontrar a localização exata que deseja compartilhar em seu site e aumentar o zoom até ver claramente a localização no mapa.

2. Botão “Compartilhar”

Clique no botão de menu “Compartilhar” no canto superior esquerdo da tela para ver a opção e, em seguida, clique na opção “Incorporar um mapa”.

Tema Divi - Botão de compartilhamento do Google Maps

3. Janela “Compartilhar”

Uma janela será aberta onde você verá duas guias chamadas “Enviar um link” e “Incorporar um mapa”. Escolha a guia “Incorporar um mapa” e você encontrará um código HTML lá.

Tema Divi - Botão de compartilhamento do Google Maps

Copie este código HTML clicando em “COPIAR CONTEÚDO HTML”:

Tema Divi - Botão de compartilhamento do Google Maps

Aqui está o que este código representa, que varia de acordo com as localizações do Google Maps:

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3456.0066415390556!2d31.132007850800175!3d29.979239128515893!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x14584587ac8f291b%3A0x810c2f3fa2a52424!2sPyramide%20de%20Kh%C3%A9ops!5e0!3m2!1sfr!2ses!4v1645881660798!5m2!1sfr!2ses" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

4. Acesse seu site

Agora vá para o seu site onde você deseja exibir o mapa. Você deve colar seu código Html no módulo CODE do Divi Builder (Conteúdo > Texto). Validar. O mapa será então exibido na sua página:

Tema Divi - Módulo CODE
Tema Divi - Módulo CODE

5. Ajustando o tamanho do mapa

Você pode alterar facilmente o tamanho do mapa modificando manualmente os valores de “largura e “altura” contidos no código HTML que você acabou de obter.

Tema Divi - Módulo CODE

Mais dicas estão disponíveis aqui .

image 100314455 13805217



Philippe

Have a Passion about Technology, Photography and Writing. Codetahiche.com is my personal blog about WordPress Plugins, WordPress Themes, VPN and Web Hosting.

Deixe um comentário