Resumo de IA
Você 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, aprimorando a experiência do usuário e fornecendo dados de localização precisos.
Neste tutorial, guiaremos você pelas etapas para usar o campo Mapa no WPForms.
Requisitos:
- Você precisará de uma licença Pro ou superior para acessar o addon de Geolocalização
- Certifique-se de ter instalado a versão mais recente do WPForms para atender à versão mínima exigida para o addon de Geolocalização
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 existente para edição.
Configurando o Addon de Geolocalização
Antes de poder usar o campo Mapa, instale e configure o addon de Geolocalização. O campo Mapa faz parte do addon de Geolocalização e requer a mesma configuração que outros recursos de geolocalização.
Depois de concluir essas etapas, você pode 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 Divertidos (Fancy Fields) no construtor de formulários. Clique no campo Mapa ou arraste e solte-o na área de visualização do formulário para adicioná-lo ao seu formulário.
2. Configurando Locais no Mapa
Após adicionar o campo Mapa, clique nele no construtor de formulários para abrir o painel Opções de Campo. Em seguida, configure os locais que aparecerão em 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 aparecerão 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: Um rótulo personalizado para o local, como “Escritório Principal” ou “Loja do Centro”.
- Descrição: Informações adicionais sobre o local.
Encontrando Locais Próximos:
Ative a opção Encontrar Locais Próximos para filtrar as sugestões de preenchimento automático de endereços com base em sua localização geográfica atual.
Quando ativado, seu navegador solicitará permissão para acessar sua localização. Assim que a permissão for concedida, as sugestões priorizarão locais próximos, facilitando a localização e seleção de endereços em sua vizinhança.
Exibindo Informações de Localização:
Ative a opção Mostrar Lista de Locais para exibir informações completas de endereço abaixo do mapa no frontend. Isso permite que os usuários vejam uma lista com o nome e o endereço de cada local que você configurou.
3. Personalizando Marcadores de 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 você deseja personalizar.
Selecione Ícone para escolher entre mais de 2000 ícones do Font Awesome, ou selecione Imagem para carregar uma imagem personalizada.
Se estiver usando ícones, clique no campo í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 em sua biblioteca de mídia.
Personalizando a Aparência do Marcador
Para alterar a cor do marcador, clique no seletor de cores ao lado do campo ícone. Você pode selecionar entre cores predefinidas, arrastar o seletor de cores para escolher qualquer cor ou colar um valor de cor hexadecimal diretamente.
Para tornar os marcadores mais proeminentes, use o menu suspenso de tamanho ao lado do campo í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 quão perto o mapa aparece 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 é ajustado automaticamente para exibir todos os locais, e esta configuração é desativada.
4. Configurando Configurações Avançadas de 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 são visíveis em seu mapa:
- Ocultar Tela Cheia: Oculta o botão de tela cheia que permite aos usuários visualizar o mapa em modo de tela cheia.
- Ocultar Tipo de Mapa: Oculta o seletor de tipo de mapa (satélite, terreno, etc.).
- Ocultar Informações do Local: Oculta os cartões de informações do local 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 fornecer 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 zoom in e zoom out.
- Desativar Arrastar: Impede que os usuários arrastem o mapa para se mover.
- Desativar Zoom do Mouse: Impede o zoom com a roda de rolagem do mouse.
Observação: Apenas uma das opções Desativar Arrastar e Desativar Zoom do Mouse pode estar ativa por vez.
Outras Configurações
Opções adicionais para o comportamento do campo de 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 frontend.
5. Lidando com Múltiplos Locais
Use vários locais quando precisar exibir vários pontos em um único mapa, como vários locais de lojas, pontos de retirada ou filiais. Esse recurso permite que os usuários vejam todos os locais de uma vez e, opcionalmente, selecionem seu local preferido.
Para adicionar vários locais ao seu mapa, clique no ícone de adição (+) 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.
Habilitando a Seleção de Local
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 habilitada.
Com esta opção, botões de rádio aparecem abaixo do mapa, permitindo que os usuários selecionem seu local preferido.
Observação: Quando vários locais estão presentes e a seleção de local está habilitada, o nível de zoom do mapa se ajusta automaticamente para exibir todos os locais, e a configuração manual do nível de zoom é desabilitada.
Perguntas Frequentes
Estas são as respostas para algumas das perguntas mais comuns que recebemos sobre o uso do campo Mapa no WPForms.
Posso ocultar outros negócios 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 a estilização do mapa é gerenciada através do recurso de estilização baseado em nuvem do Google, essa configuração é feita no seu painel do Google Cloud Console.
Veja nossa documentação para desenvolvedores sobre aplicar estilos de mapa personalizados ao Campo de 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? Certifique-se de conferir nosso guia sobre uso de temas de formulário para obter todos os detalhes sobre como aplicar esses temas aos seus formulários.