Resumo de IA
Pretende ocultar pontos de interesse (POIs) como restaurantes, lojas e outros estabelecimentos no seu Campo de Mapa para que apenas os seus marcadores personalizados fiquem visíveis? O Google Maps exibe estes POIs por defeito, mas pode personalizar a aparência do mapa utilizando a funcionalidade de estilização de mapas baseada na nuvem da Google Cloud Console.
Este tutorial mostra como criar um estilo de mapa personalizado na Google Cloud Console, configurá-lo para ocultar POIs e aplicá-lo ao seu Campo de Mapa WPForms utilizando um trecho de código.
Criar um Estilo de Mapa Personalizado na Google Cloud Console
Para começar, abra a Google Cloud Console e selecione o projeto onde a sua chave da API Google Places está configurada. Em seguida, clique em Estilos de Mapa na barra lateral esquerda ou vá diretamente para Estilos de Mapa.
Uma vez lá, clique no botão Criar estilo de mapa para iniciar um novo estilo de mapa.
Em seguida, na janela modal que aparece, selecione um modo para o seu mapa escolhendo Claro ou Escuro. Se desejar, também pode selecionar um tema opcional como Monocromático para aplicar estilização adicional. Assim que tiver feito as suas seleções, clique no botão Personalizar para abrir o editor de estilos.
Assim que o editor de estilos for aberto, localize e clique na categoria Pontos de interesse. Isto expande-se para revelar uma lista de tipos individuais de Pontos de interesse (POI), como Emergência, Entretenimento, Comida e bebida, Alojamento, Recreação, Retalho e outros.
Para ocultar POIs, clique no ícone do olho no lado direito do ecrã para cada categoria que pretende ocultar. Pode ocultar todos os POIs de uma vez clicando no ícone do olho ao lado da categoria principal Pontos de Interesse, ou pode ocultar seletivamente tipos específicos de POI clicando no ícone do olho ao lado de cada categoria individual.
Após configurar o seu estilo de mapa, clique em Guardar.
Obter o seu ID de Mapa
Assim que o seu estilo for publicado, terá de criar um ID de Mapa e associá-lo ao seu estilo para o utilizar no WPForms.
Para o fazer, navegue para a secção Gestão de Mapas na barra lateral esquerda e clique em Criar ID de Mapa na sua Google Cloud Console.
Na caixa de diálogo que aparece, introduza um nome descritivo para o seu ID de Mapa, selecione JavaScript como o tipo de Mapa e escolha Vector das opções disponíveis.
Assim que terminar, clique em Guardar para criar o novo ID de mapa.
Assim que o seu ID de Mapa for criado, percorra a página do ID de Mapa até à secção Estilos de Mapa. Clique no ícone do lápis ao lado do estilo de mapa Padrão do Google.
Isto abre uma barra lateral onde precisaria de selecionar o seu estilo de mapa personalizado. Na barra lateral, localize o seu estilo publicado na secção Os Meus Estilos e selecione-o.
Em seguida, clique em Concluído para associar o seu estilo personalizado ao ID de Mapa.
Isto garante que o estilo que configurou será aplicado sempre que este ID de Mapa for utilizado.
Por fim, copie o valor do ID do Mapa apresentado na página do ID do Mapa, pois precisará deste ID para integrar o estilo personalizado com o WPForms no passo seguinte.
Aplicar o ID de Mapa ao seu Campo de Mapa
Para aplicar o seu estilo de mapa personalizado ao Campo de Mapa do WPForms, utilize o seguinte trecho de código PHP. Personalize-o com o ID do seu formulário, o ID do campo e o ID do Mapa que copiou.
- Na linha 11, substitua
111pelo ID real do seu formulário - Na linha 15, substitua
222pelo ID real do seu Campo de Mapa - Na linha 19, substitua
'your-map-id'pelo ID do Mapa que copiou da Google Cloud Console (mantenha as aspas à volta)
Após guardar o trecho de código com os seus valores personalizados, o seu Campo de Mapa utilizará o estilo de mapa personalizado da Google Cloud Console. O mapa exibirá apenas os seus marcadores personalizados sem quaisquer pontos de interesse, proporcionando-lhe uma vista limpa e focada das suas localizações.
É tudo! Agora pode ocultar pontos de interesse no seu Campo de Mapa e mostrar apenas os seus marcadores personalizados. Para mais formas de personalizar os seus formulários, consulte o nosso guia sobre personalização do WPForms com código.