Como inserir um mapa Google Maps com DIVI

Os módulos de mapas facilitam a incorporação do Google Maps personalizado em qualquer lugar da sua página. Você pode até adicionar pinos ilimitados ao mapa e definir um local inicial da porta de visualização personalizada. Os módulos de mapas também vêm em um formato Full Width , então não deixe de conferir também!

Chave de API do Google Maps

Uma chave de API é necessária para usar o módulo de mapas. Para obter uma chave de API, faça login no Google Developers Console, que orientará você pelo processo. E ative a API JavaScript do Google Maps e quaisquer serviços relacionados automaticamente. A primeira coisa que você será solicitado a fazer é criar um novo projeto.

Em seguida, você será solicitado a nomear seu projeto. Você pode nomear o projeto como quiser. Neste exemplo, eu simplesmente o chamei de “Mapas”. Você também pode inserir o nome de domínio do seu site (adicionar um * na frente dele, se você permitir o acesso de ambos os domínios, www.dominio.com e domain.com) para certificar-se de outros sites.
Se são permitidos na sua chave de API.

Depois de ter criado um nome para seu projeto, você será presenteado com uma chave de API que você pode usar.

Depois de obter uma chave de API, você deve copiá-la / colá-la no painel de opções do tema, navegando até:
Divi >> Opções de tema >> Configurações gerais >> Chave da API do Google Maps.

Como adicionar um módulo de mapa à sua página

Antes de poder adicionar um módulo de mapa à sua página, primeiro você precisa pular para o Divi Builder. Uma vez que o Divi Theme tenha sido instalado em seu site, você notará um botão Usar Divi Builder acima do editor de postagens toda vez que você estiver construindo uma nova página. Clicar neste botão permitirá ao Divi Builder, dar acesso a todos os módulos do Divi Builder. Em seguida, clique no botão Usar o Visual Builder para iniciar o construtor no Modo Visual. Você também pode clicar no botão Usar o Visual Builder ao navegar pelo seu site no front end se estiver logado no seu Painel do WordPress.

Depois de inserir o Visual Builder, você pode clicar no botão cinza para adicionar um novo módulo à sua página.
Novos módulos só podem ser adicionados dentro de linhas. Se você estiver iniciando uma nova página, não se esqueça de adicionar uma linha à sua página primeiro.
Localize o módulo do mapa na lista de módulos e clique nele para adicioná-lo à sua página. A lista de módulos é pesquisável, o que significa que você também pode digitar a palavra “mapa” e depois clicar em enter para encontrar e adicionar automaticamente o módulo do mapa! Uma vez que o módulo tenha sido adicionado, você será saudado com a lista de opções do módulo. Essas opções são separadas em três grupos principais: conteúdo, design e avançado.

Exemplo de caso de uso: adicionar um módulo de mapa a uma página de contato

Um módulo de mapa é uma ótima maneira de mostrar a localização da sua empresa na sua página de contato. E a capacidade de adicionar vários pinos ao mapa para exibir diferentes locais e informações da empresa é um recurso útil e envolvente.

Para este exemplo, adicionarei um módulo de mapa para mostrar a localização e as informações da empresa adicionando um alfinete personalizado ao mapa.

Importante: verifique se uma chave de API do Google válida foi inserida dentro do painel Opções do tema Divi. O Módulo de Mapa não funcionará sem ele.

Usando o Visual Builder, adicione uma seção padrão à parte inferior da página de contato. Em seguida, insira o módulo Map em sua nova seção. Na guia Conteúdo das Configurações do Mapa, insira o endereço da empresa na opção Endereço do Centro de Mapeamento. O Endereço do Centro de Mapas é para o ponto central do mapa.

Em seguida, clique em + Adicionar novo item para criar seu primeiro pin. Atualize o seguinte:

Título: [introduza o título da sua localização]
Conteúdo: [introduza o conteúdo do seu PIN (ex. Endereço e número de telefone)]
Endereço do mapa: [introduza o endereço para esta localização específica]

Salvar configurações

É isso aí. Agora você tem um módulo de mapa dinâmico na parte inferior da página de contato com um pino clicável que exibe informações da empresa.

Opções de Conteúdo do Mapa

Na aba de conteúdo, você encontrará todos os elementos de conteúdo do módulo, como texto, imagens e ícones. Tudo o que controla o que aparece no seu módulo será sempre encontrado nessa guia.

+ Adicionar novo item

É aqui que você adiciona novos pinos (ou locais) ao seu Módulo do Mapa. Clicar em “adicionar novo item” abrirá uma lista completamente nova de configurações de design (incluindo Conteúdo, Design, Avançado) para o seu novo pin. Veja abaixo as configurações individuais de pinos.

Depois de adicionar seu primeiro pin, você verá uma barra cinza com o título do seu pino exibido como um marcador. A barra cinza também possui três botões que permitem editar, duplicar ou excluir o PIN.

Chave de API do Google

O módulo Maps usa a API do Google Maps e exige uma chave de API do Google válida para funcionar. Antes de usar o módulo de mapas, certifique-se de ter adicionado sua chave de API dentro do painel Opções de Tema Divi. Saiba mais sobre como criar sua chave de API do Google aqui.

Endereço do centro do mapa

Digite um endereço para o ponto central do mapa e o endereço será geocodificado e exibido no mapa abaixo. Isso é útil se você tiver vários pinos e quiser que o mapa seja ampliado para um local específico mais focalizado.
Você pode simplesmente digitar um endereço em um formato padrão, como “1235 Sunny Road, Some City, State, 88343.”

Rótulo de administração

Isso mudará o rótulo do módulo no construtor para fácil identificação. Ao usar a visualização WireFrame no Visual Builder, essas etiquetas aparecerão no bloco do módulo na interface do Divi Builder.

Opções de Design de Mapa

Dentro da guia de design, você encontrará todas as opções de estilo do módulo, como fontes, cores, dimensionamento e espaçamento. Esta é a guia que você usará para alterar a aparência do seu módulo. Cada módulo Divi tem uma longa lista de configurações de design que você pode usar para alterar praticamente qualquer coisa.

Zoom da roda do mouse

Aqui você pode escolher se o nível de zoom será controlado pela roda do mouse ou não. Muitas vezes, é melhor desativar essa opção para que os visitantes não sejam interrompidos enquanto rolam a página para baixo e colocam a roda do mouse presa dentro do iframe do mapa. Isto é especialmente verdadeiro para módulos de mapa de largura total.

Zoom arrastável

Aqui você pode escolher se o mapa será ou não arrastável em dispositivos móveis.

Use o filtro de escala de cinza

Ativar essa opção transformará seu mapa em uma imagem em tons de cinza.

Mapear opções avançadas

Na guia avançada, você encontrará opções que os designers da Web mais experientes podem achar úteis, como atributos CSS e HTML personalizados. Aqui você pode aplicar CSS personalizado a qualquer um dos muitos elementos do módulo. Você também pode aplicar classes e IDs CSS personalizadas ao módulo, que pode ser usado para personalizar o módulo no arquivo style.css do tema filho.

ID CSS

Digite um ID CSS opcional a ser usado para este módulo. Um ID pode ser usado para criar um estilo CSS personalizado ou para criar links para seções específicas de sua página.

Classe CSS

Digite classes CSS opcionais a serem usadas para este módulo. Uma classe CSS pode ser usada para criar um estilo CSS personalizado. Você pode adicionar várias classes separadas por um espaço. Essas classes podem ser usadas no seu Divi Child Theme ou no CSS personalizado que você adiciona à sua página ou ao seu site usando as opções Divi Theme ou Divi Builder Page Settings.

CSS customizado

O CSS personalizado também pode ser aplicado ao módulo e a qualquer um dos elementos internos do módulo. Na seção CSS personalizado, você encontrará um campo de texto no qual poderá adicionar CSS personalizado diretamente a cada elemento. As entradas CSS nessas configurações já estão agrupadas em tags de estilo, portanto, você só precisa inserir regras CSS separadas por ponto e vírgula.

Visibilidade

Esta opção permite controlar em quais dispositivos seu módulo aparece. Você pode optar por desativar seu módulo em tablets, smartphones ou computadores desktop individualmente. Isso é útil se você quiser usar módulos diferentes em dispositivos diferentes ou se quiser simplificar o design móvel eliminando determinados elementos da página.

Opções individuais de pinos do mapa

Título

Ao criar um novo pin, você pode atribuir um título. Esse título aparecerá na caixa ao passar o mouse sobre o marcador no mapa.

Conteúdo

Ao criar um novo pin, você pode atribuir um bloco de texto de conteúdo. Esse texto aparecerá na caixa ao passar o mouse sobre o alfinete no mapa.

Endereço do Pin do Mapa

Esta é a localização específica no mapa onde seu novo pin será exibido. Você pode inserir o endereço em um formato padrão.