A Utilizar 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-lhe 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 através dos passos para utilizar o campo Mapa no WPForms.

---

Antes de começar, certifique-se de que instala e ativa o plugin WPForms no seu site e verifica a sua licença. Em seguida, crie um novo formulário ou abra um existente para edição.

Configurar o Addon de Geolocalização

Antes de poder utilizar 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 outras funcionalidades de geolocalização.

Depois de ter concluído estes passos, pode começar a utilizar o campo Mapa nos seus formulários.

1. Adicionar um Campo Mapa ao Seu Formulário

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

2. Configurar Locais do Mapa

Após adicionar o campo Mapa, clique nele no construtor de formulários para abrir o painel Opções do Campo. Em seguida, configure os locais que aparecerão no seu mapa a partir da secção Locais.

Adicionar Moradas

Comece por digitar uma morada no campo Morada.

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

Após selecionar uma morada, 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.

Encontrar Locais Próximos:

Ative a opção Encontrar Locais Próximos para filtrar as sugestões de preenchimento automático de moradas com base na sua localização geográfica atual.

Quando ativada, o seu navegador solicitará permissão para aceder à sua localização. Assim que a permissão for concedida, as sugestões priorizarão os locais próximos, tornando mais fácil encontrar e selecionar moradas na sua vizinhança.

Exibir Informações de Localização:

Ative a opção Mostrar Lista de Locais para exibir informações completas de morada abaixo do mapa no frontend. Isto permite aos utilizadores ver uma lista com o nome e a morada de cada local que configurou.

3. Personalizar Marcadores do 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 pretende personalizar.

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

Se estiver a usar ícones, clique no campo do ícone para abrir o selecionador de ícones. Procure o ícone que pretende e selecione-o.

Se estiver a usar 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 cores pré-definidas, arrastar o seletor de cores para escolher qualquer cor, ou colar um valor de cor hexadecimal diretamente.

Para tornar os marcadores mais proeminentes, utilize o menu suspenso de tamanho ao lado do campo do ícone. As opções disponíveis são: Pequeno, Médio ou Grande. Marcadores maiores ajudam as suas localizações personalizadas a destacar-se de outras localizações no mapa.

Definir o Nível de Zoom

Ajuste o campo Nível de Zoom para controlar a proximidade com que o mapa aparece quando é carregado pela primeira vez. O valor predefinido é 15, que é o nível de zoom padrão para mapas incorporados.

Quando várias localizações são configuradas, o nível de zoom ajusta-se automaticamente para exibir todas as localizações, e esta configuração fica desativada.

4. Configurar 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.

Definições de Apresentação

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

• Ocultar Ecrã Completo: Oculta o botão de ecrã completo que permite aos utilizadores ver o mapa em modo de ecrã completo.
• Ocultar Tipo de Mapa: Oculta o seletor de tipo de mapa (satélite, terreno, etc.).
• Ocultar Informações da Localização: Oculta os cartões de informação da localização que aparecem ao clicar nos marcadores.
• Ocultar Street View: Oculta o controlo Street View.

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

Definiçõ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 zoom in e zoom out.
• Desativar Arrastar: Impede os utilizadores de arrastar o mapa para se deslocarem.
• Desativar Zoom do Rato: Impede o zoom com a roda de scroll do rato.

Outras Definiçõ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 Múltiplos Locais

Utilize v ilde{A¡rias localiza ilde{A§ ilde{Aµes}} quando precisar de exibir v ilde{A¡rios pontos num ilde{u}nico mapa, como m ilde{u}ltiplas localiza ilde{A§ ilde{Aµes}} de lojas, pontos de recolha ou sucursais. Esta funcionalidade permite aos utilizadores ver todas as localiza ilde{A§ ilde{Aµes}} de uma s ilde{A³}} vez e, opcionalmente, selecionar a sua localiza ilde{A§ ilde{A£o}} preferida.

Para adicionar m ilde{u}ltiplas localiza ilde{A§ ilde{Aµes}} ao seu mapa, clique no extit{icon} de mais (+) na sec ilde{A§ ilde{A£o}} de Localiza ilde{A§ ilde{Aµes}} do painel Op ilde{A§ ilde{Aµes}} de Campo. Cada localiza ilde{A§ ilde{A£o}} pode ter o seu pr ilde{A³}}prio extit{icon} de marcador ilde{u}nico, cor, nome e descri ilde{A§ ilde{A£o}}.

Ativar Sele ilde{A§ ilde{A£o}} de Localiza ilde{A§ ilde{A£o}}

Quando tiver duas ou mais localiza ilde{A§ ilde{Aµes}} configuradas, ative a op ilde{A§ ilde{A£o}} Permitir Sele ilde{A§ ilde{A£o}} de Localiza ilde{A§ ilde{A£o}}. Esta funcionalidade requer:

• Pelo menos duas localiza ilde{A§ ilde{Aµes}} adicionadas ao mapa.
• A op ilde{A§ ilde{A£o}} Mostrar Lista de Localiza ilde{A§ ilde{Aµes}} ativada.

Com esta op ilde{A§ ilde{A£o}}, bot ilde{Aµes}} de r ilde{A¡}}dio aparecem abaixo do mapa, permitindo aos utilizadores selecionar a sua localiza ilde{A§ ilde{A£o}} preferida.

Perguntas Frequentes

Estas s ilde{A£o}} respostas a algumas das perguntas mais comuns que recebemos sobre a utiliza ilde{A§ ilde{A£o}} do campo Mapa no WPForms.

Posso ocultar outros neg ilde{A³}}cios e pontos de interesse no meu mapa?

Sim. Para ocultar pontos de interesse (POIs) como restaurantes e lojas, de modo a que apenas os seus marcadores personalizados sejam vis ilde{1}}veis, ter ilde{A¡}} de criar um estilo de mapa personalizado na Google Cloud Console e, em seguida, aplic ilde{A¡}}-lo ao seu Campo de Mapa utilizando um trecho de c ilde{A³}}digo. Como a estiliza ilde{A§ ilde{A£o}} do mapa ilde{A©}} gerida atrav ilde{A©}}s da funcionalidade de estiliza ilde{A§ ilde{A£o}} baseada na nuvem do Google, esta configura ilde{A§ ilde{A£o}} ilde{A©}} feita no seu painel Google Cloud Console.

Consulte a nossa documenta ilde{A§ ilde{A£o}} para programadores sobre aplicar estilos de mapa personalizados ao Campo de Mapa para obter instru ilde{A§ ilde{Aµes}} passo a passo.

extit{E} extit{pronto}}! Agora sabe como usar o campo Mapas no WPForms para melhorar os seus formul ilde{A¡}}rios com mapas interativos e dados de localiza ilde{A§ ilde{A£o}} precisos.

Em seguida, gostaria de melhorar facilmente o design dos seus formul ilde{A¡}}rios com temas prontos a usar? Certifique-se de que consulta o nosso guia sobre utilizar temas de formul ilde{A¡}}rios para obter todos os detalhes sobre como aplicar estes temas aos seus formul ilde{A¡}}rios.