Usando o campo Mapa

Gostaria de exibir um mapa em seus formulários para mostrar locais específicos ou ajudar os usuários a selecionar um local? O campo Mapa no WPForms permite integrar mapas interativos diretamente em seus formulários, melhorando a experiência do usuário e fornecendo dados precisos de localização.

Neste tutorial, vamos guiá-lo pelas etapas para usar o campo Mapa no WPForms.

---

Antes de começar, certifique-se de instalar e ativar o plugin WPForms em seu site e verificar sua licença. Em seguida, crie um novo formulário ou abra um já existente para edição.

Configuração do complemento de geolocalização

Antes de poder usar o campo Mapa, instale e configure o complemento Geolocalização. O campo Mapa faz parte do complemento Geolocalização e requer a mesma configuração que outros recursos de geolocalização.

Depois de concluir essas etapas, você poderá começar a usar o campo Mapa em seus formulários.

1. Adicionando um campo de mapa ao seu formulário

Comece localizando o campo Mapa na seção Campos personalizados do criador de formulários. Clique no campo Mapa ou arraste-o e solte-o na área de visualização do formulário para adicioná-lo ao seu formulário.

2. Configurando localizações no mapa

Depois de adicionar o campo Mapa, clique nele no criador de formulários para abrir o painel Opções de campo. Em seguida, configure os locais que aparecerão no seu mapa na seção Locais.

Adicionando endereços

Comece digitando um endereço no campo Endereço.

À medida que você digita, sugestões de preenchimento automático serão exibidas com base nos dados do Google Places. Em seguida, selecione o local desejado na lista de sugestões.

Após selecionar um endereço, você pode adicionar:

• Nome: uma etiqueta personalizada para o local, como “Escritório principal” ou “Loja no centro da cidade”.
• Descrição: Informações adicionais sobre o local.

Encontrar locais próximos:

Ative a opção Localizar locais próximos para filtrar as sugestões de preenchimento automático de endereços com base na sua localização geográfica atual.

Quando ativado, seu navegador solicitará permissão para acessar sua localização. Uma vez concedida a permissão, as sugestões darão prioridade aos locais próximos, facilitando a localização e seleção de endereços nas proximidades.

Exibindo informações de localização:

Habilite a opção Mostrar lista de locais para exibir informações completas de endereço abaixo do mapa no front-end. Isso permite que os usuários vejam uma lista com o nome e o endereço de cada local que você configurou.

3. Personalização dos marcadores do mapa

Cada local pode ter um ícone ou imagem personalizada como marcador. Na seção Locais, encontre o menu suspenso Ícone para o local que deseja personalizar.

Selecione Ícone para escolher entre mais de 2000 ícones Font Awesome ou selecione Imagem para carregar uma imagem personalizada.

Se estiver usando ícones, clique no campo do ícone para abrir o seletor de ícones. Procure o ícone desejado e selecione-o.

Se estiver usando imagens, clique em Carregar imagem para abrir a biblioteca de mídia. Carregue um novo arquivo ou selecione uma imagem existente na sua biblioteca de mídia.

Personalizando a aparência dos marcadores

Para alterar a cor do marcador, clique no seletor de cores ao lado do campo do ícone. Você pode selecionar uma das cores predefinidas, arrastar o seletor de cores para escolher qualquer cor ou colar diretamente um valor hexadecimal de cor.

Para tornar os marcadores mais visíveis, use o menu suspenso ao lado do campo do ícone. As opções disponíveis são: Pequeno, Médio ou Grande. Marcadores maiores ajudam seus locais personalizados a se destacarem de outros locais no mapa.

Definindo o nível de zoom

Ajuste o campo Nível de zoom para controlar o nível de aproximação do mapa quando ele é carregado pela primeira vez. O valor padrão é 15, que é o nível de zoom padrão para mapas incorporados.

Quando vários locais são configurados, o nível de zoom se ajusta automaticamente para exibir todos os locais, e essa configuração é desativada.

4. Configurando as definições avançadas do mapa

Para personalização adicional, clique na guia Avançado no painel Opções de campo. Aqui você pode controlar a aparência do mapa, as interações do usuário e como ele é exibido nas entradas do formulário.

Configurações de apresentação

Decida quais elementos da interface do usuário do Google Maps serão visíveis no seu mapa:

• Ocultar tela inteira: Oculta o botão de tela inteira que permite aos usuários visualizar o mapa no modo de tela inteira.
• Ocultar tipo de mapa: Oculta o seletor de tipo de mapa (satélite, terreno, etc.).
• Ocultar informações de localização: Oculta os cartões de informações de localização que aparecem ao clicar nos marcadores.
• Ocultar Street View: Oculta o controle do Street View.

A maioria dessas opções está oculta por padrão para proporcionar uma aparência mais limpa ao mapa.

Configurações interativas

Controle como os usuários interagem com o mapa:

• Ocultar controle da câmera: Oculta os botões de controle da câmera.
• Ocultar zoom: Oculta os botões de aumentar e diminuir o zoom.
• Desativar arrastar: impede que os usuários arrastem o mapa para se deslocarem.
• Desativar zoom do mouse: impede o zoom com a roda do mouse.

Outras configurações

Opções adicionais para o comportamento do campo do mapa:

• Mostrar na entrada: exibe os dados do mapa nas entradas do formulário.
• Mostrar miniatura na entrada: Mostra uma miniatura do mapa nas entradas do formulário.
• Ocultar rótulo: Oculta o rótulo do campo no front-end.

5. Lidando com vários locais

Use vários locais quando precisar exibir vários pontos em um único mapa, como várias lojas, pontos de retirada ou filiais. Esse recurso permite que os usuários vejam todos os locais de uma só vez e, opcionalmente, selecionem seu local preferido.

Para adicionar vários locais ao seu mapa, clique no ícone de mais (+) na seção Locais do painel Opções de campo. Cada local pode ter seu próprio ícone de marcador, cor, nome e descrição exclusivos.

Ativando a seleção de localização

Quando você tiver dois ou mais locais configurados, habilite a opção Permitir seleção de local. Esse recurso requer:

• Pelo menos dois locais adicionados ao mapa.
• A opção Mostrar lista de locais deve estar ativada.

Com esta opção, botões de opção aparecem abaixo do mapa, permitindo que os usuários selecionem sua localização preferida.

Perguntas frequentes

Estas são respostas para algumas das perguntas mais comuns que recebemos sobre o uso do campo Mapa no WPForms.

Posso ocultar outras empresas e pontos de interesse no meu mapa?

Sim. Para ocultar pontos de interesse (POIs), como restaurantes e lojas, de modo que apenas seus marcadores personalizados fiquem visíveis, você precisará criar um estilo de mapa personalizado no Google Cloud Console e, em seguida, aplicá-lo ao seu campo de mapa usando um trecho de código. Como o estilo do mapa é gerenciado por meio do recurso de estilo baseado em nuvem do Google, essa configuração é feita no painel do Google Cloud Console.

Consulte nossa documentação para desenvolvedores sobre como aplicar estilos de mapa personalizados ao campo Mapa para obter instruções passo a passo.

É isso! Agora você sabe como usar o campo Mapas no WPForms para aprimorar seus formulários com mapas interativos e dados de localização precisos.

Em seguida, você gostaria de aprimorar facilmente o design dos seus formulários com temas prontos? Não deixe de conferir nosso guia sobrecomo usar temas de formuláriospara obter todos os detalhes sobre como aplicar esses temas aos seus formulários.