Usando o campo Mapa

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

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 no seu site e verificar a sua licença. Em seguida, crie um novo formulário ou abra um já existente para edição.

Configurar o complemento de geolocalização

Antes de poder utilizar 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 estas etapas, poderá começar a usar o campo Mapa nos seus formulários.

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

Comece por localizar o campo Mapa na secção Campos avançados do criador de formulários. Clique no campo Mapa ou arraste-o e solte-o na área de pré-visualização do formulário para o adicionar ao seu formulário.

2. Configurar 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 secção Locais.

Adicionar endereços

Comece por digitar um endereço no campo Endereço.

À medida que 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.

Depois de selecionar um endereço, pode adicionar:

• Nome: Uma etiqueta personalizada para o local, como «Escritório principal» ou «Loja no centro».
• Descrição: Informações adicionais sobre a localização.

Encontrar 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 na sua localização geográfica atual.

Quando ativado, o seu navegador solicitará permissão para aceder à sua localização. Assim que a permissão for concedida, as sugestões darão prioridade a locais próximos, facilitando a localização e seleção de endereços nas suas proximidades.

Exibindo informações de localização:

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

3. Personalizar marcadores de mapa

Cada localização pode ter um ícone ou imagem personalizada como marcador. Na secção Localizações, encontre o menu suspenso Ícone para a localização que deseja personalizar.

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

Se estiver a utilizar ícones, clique no campo do ícone para abrir o seletor de ícones. Procure o ícone que deseja e selecione-o.

Se estiver a utilizar imagens, clique em Carregar imagem para abrir a biblioteca de multimédia. Carregue um novo ficheiro ou selecione uma imagem existente na sua biblioteca de multimédia.

Personalizar a aparência do marcador

Para alterar a cor do marcador, clique no seletor de cores ao lado do campo do ícone. Pode selecionar entre as 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 os seus locais personalizados a se destacarem dos outros locais no mapa.

Definir 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 ajusta-se automaticamente para exibir todos os locais, e essa configuração é desativada.

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

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

Configurações de apresentação

Decida quais elementos da interface do utilizador do Google Maps ficam visíveis no seu mapa:

• Ocultar ecrã inteiro: Oculta o botão de ecrã inteiro que permite aos utilizadores visualizar o mapa no modo de ecrã inteiro.
• 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 controlo do Street View.

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

Configurações interativas

Controle como os utilizadores interagem com o mapa:

• Ocultar controlo da câmara: Oculta os botões de controlo da câmara.
• Ocultar zoom: Oculta os botões de aumentar e diminuir o zoom.
• Desativar arrastar: impede que os utilizadores arrastem o mapa para se deslocarem.
• Desativar zoom do rato: impede o zoom com a roda do rato.

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 frontend.

5. Lidar com vários locais

Use vários locais quando precisar exibir vários pontos num único mapa, como várias lojas, pontos de recolha ou filiais. Esse recurso permite que os utilizadores vejam todos os locais de uma só vez e, opcionalmente, selecionem o local de sua preferência.

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

Ativar a seleção de localização

Quando tiver duas ou mais localizações configuradas, ative a opção Permitir seleção de localização. Esta funcionalidade requer:

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

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

Perguntas mais 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 os 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 na nuvem do Google, essa configuração é feita no painel do Google Cloud Console.

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

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

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