Resumo da IA
Quer ocultar pontos de interesse (POIs), como restaurantes, lojas e outros negócios, no seu campo de mapa para que apenas os seus marcadores personalizados fiquem visíveis? O Google Maps exibe esses POIs por predefinição, mas pode personalizar a aparência do mapa usando o recurso de estilo de mapa baseado na nuvem do Google Cloud Console.
Este tutorial mostra como criar um estilo de mapa personalizado no Google Cloud Console, configurá-lo para ocultar POIs e aplicá-lo ao seu campo de mapa WPForms usando um trecho de código.
Criar um estilo de mapa personalizado no Google Cloud Console
Para começar, abra o Google Cloud Console e selecione o projeto onde a sua chave da API do Google Places está configurada. Em seguida, clique em Estilos de mapa na barra lateral esquerda ou aceda diretamente a Estilos de mapa.
Uma vez lá, clique no botão Criar estilo de mapa para começar 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 estilos adicionais. Depois de fazer as suas seleções, clique no botão Personalizar para abrir o editor de estilos.
Depois de abrir o editor de estilos, localize e clique na categoria Pontos de interesse. Isso expande a lista para revelar os tipos individuais de Pontos de interesse (POI), como Emergência, Entretenimento, Comida e bebida, Alojamento, Recreação, Varejo e outros.
Para ocultar POIs, clique no ícone do olho no lado direito do ecrã para cada categoria que deseja ocultar. Pode ocultar todos os POIs de uma só 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 estilo do mapa, clique em Guardar.
Obter o seu ID do mapa
Depois de publicar o seu estilo, terá de criar um ID de mapa e associá-lo ao seu estilo para o utilizar no WPForms.
Para isso, aceda à secção Gestão de mapas na barra lateral esquerda e clique em Criar ID do mapa no seu Google Cloud Console.
Na caixa de diálogo que aparece, introduza um nome descritivo para o seu ID do mapa, selecione JavaScript como o tipo de mapa e escolha Vector entre as opções disponíveis.
Quando terminar, clique em Guardar para criar o novo ID do mapa.
Depois de criar o seu ID do mapa, desça na página ID do mapa até a secção Estilos do mapa. Clique no ícone de lápis ao lado do estilo padrão do mapa do Google.
Isso abre uma barra lateral onde você precisa selecionar o seu estilo de mapa personalizado. Na barra lateral, encontre 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 do mapa.
Isso garante que o estilo que você configurou será aplicado sempre que este ID de mapa for usado.
Por fim, copie o valor do ID do mapa exibido na página ID do mapa, pois precisará desse ID para integrar o estilo personalizado com o WPForms na próxima etapa.
Aplicando o ID do 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.
- Em linha 11, substituir
111com o seu ID de formulário real - Em linha 15, substituir
222com o seu ID de campo de mapa real - Em linha 19, substituir
'your-map-id'com o ID do mapa que copiou do Google Cloud Console (mantenha as aspas à volta dele)
Depois de guardar o trecho de código com os seus valores personalizados, o seu campo de mapa utilizará o estilo personalizado do Google Cloud Console. O mapa exibirá apenas os seus marcadores personalizados, sem pontos de interesse, proporcionando uma visualização clara e focada das suas localizações.
É isso! 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 como personalizar o WPForms com código.