Se você deseja adicionar um mapa do Google ao Divi, pode usar o módulo Divi Map ou incorporá-lo diretamente do Google.
O módulo Divi Map exige que você insira uma chave de API do Google Maps e forneça ao Google os detalhes do seu cartão de crédito antes que ele funcione. Mesmo assim, seus mapas do Google podem não estar funcionando e você pode ver um erro request_denied.
O método alternativo é incorporar o mapa usando um iframe do Google Maps.
Isso pode ser colocado em um módulo Divi Code ou em qualquer área de texto dentro de outros módulos e não requer API para funcionar.
5 etapas para incorporar o Google Maps no Divi (sem API ou plug-in do Google)
- Vá para o Google Maps, pesquise sua localização e selecione-a nos resultados à esquerda
- Clique no ícone azul Compartilhar no painel esquerdo
- Clique na guia “Incorporar um mapa” na janela pop-up Compartilhar
- Copie o código iframe clicando no link “COPY HTML”
- No seu site Divi, adicione um módulo de código em qualquer lugar que você queira que o mapa exiba e cole o código que você copiou. Você também pode adicioná-lo a qualquer área de texto em outros módulos.
Seu Google Map agora está sendo exibido ao vivo em seu site Divi sem API e sem módulo de mapa.
5 etapas para tornar seu Google Maps de largura total
- Adicione uma nova seção com 1 linha e adicione seu módulo Code com o código iframe do Google Maps
- Edite o código iframe para alterar a largura de largura=”600″ para largura=”100%”. Você pode definir sua altura usando um número de pixel fixo, não %.
- Em Configurações de linha > Design > Dimensionamento ativando “Usar largura da calha personalizada” e definindo-o como 1
- Em Configurações de linha> Design> Dimensionamento, defina Largura e Largura máxima para 100%
- Em Configurações de linha> Design> Espaçamento, defina a margem superior e inferior para 0px
Personalize seu mapa usando filtros de módulo
Com seu mapa sendo exibido por meio de um módulo de código, você pode usar as configurações de design do módulo de código para personalizar ainda mais seu mapa usando as configurações internas para os estados padrão e de foco. Com vários filtros aplicados, você pode obter alguns efeitos interessantes para o seu mapa.
No seu módulo de código, vá para Code Settings > Design > Filter e edite quaisquer combinações de matiz, saturação, contraste, inversão, sépia, opacidade e desfoque como em qualquer módulo Divi. Abaixo estão alguns exemplos de como você pode personalizar seus mapas usando os filtros do módulo.
Se você usou o método de incorporação para adicionar um Google Map legal ao seu site Divi, deixe um link nos comentários e nos mostre o que você fez.
Considerações finais
O módulo Divi Map é uma boa adição ao Divi Theme, mas para a maioria das pessoas, é mais fácil copiar e colar o código de compartilhamento diretamente do Google Maps.
Você tem algum exemplo de uso legal do mapa do Google? Deixe um link nos comentários abaixo