Resumo da IA
Deseja ocultar pontos de interesse (POIs), como restaurantes, lojas e outros estabelecimentos comerciais, no seu campo de mapa para que apenas os seus marcadores personalizados fiquem visíveis? O Google Maps exibe esses POIs por padrão, mas você pode personalizar a aparência do mapa usando o recurso de estilo de mapa baseado em 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.
Criando um estilo de mapa personalizado no Google Cloud Console
Para começar, abra o Google Cloud Console e selecione o projeto onde sua chave da API do Google Places está configurada. Em seguida, clique em Estilos de mapa na barra lateral esquerda ou acesse diretamente 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, você também pode selecionar um tema opcional, como Monocromático, para aplicar estilos adicionais. Depois de fazer suas seleções, clique no botão Personalizar para abrir o editor de estilos.
Depois que o editor de estilos abrir, localize e clique na categoria Pontos de interesse. Isso expandirá a tela, revelando uma lista de tipos individuais de Pontos de interesse (POI), como Emergência, Entretenimento, Alimentos e bebidas, Hospedagem, Recreação, Varejo e outros.
Para ocultar POIs, clique no ícone do olho no lado direito da tela para cada categoria que deseja ocultar. Você 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 estilo do mapa, clique em Salvar.
Obtenha o seu ID do mapa
Depois que seu estilo for publicado, você precisará criar um ID de mapa e associá-lo ao seu estilo para usá-lo no WPForms.
Para isso, acesse a seção Gerenciamento de mapas na barra lateral esquerda e clique em Criar ID do mapa no Google Cloud Console.
Na caixa de diálogo exibida, insira um nome descritivo para o seu ID do mapa, selecione JavaScript como o tipo de mapa e escolha Vetor entre as opções disponíveis.
Quando terminar, clique em Salvar para criar o novo ID do mapa.
Depois de criar seu ID do mapa, role a página ID do mapa até a seçã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 seu estilo de mapa personalizado. Na barra lateral, encontre seu estilo publicado na seção Meus estilos e selecione-o.
Em seguida, clique em Concluído para associar seu estilo personalizado ao ID do mapa.
Isso garante que o estilo que você configurou será aplicado sempre que esse ID de mapa for usado.
Por fim, copie o valor do ID do mapa exibido na página ID do mapa, pois você precisará desse ID para integrar o estilo personalizado ao WPForms na próxima etapa.
Aplicando o ID do mapa ao seu campo de mapa
Para aplicar seu estilo de mapa personalizado ao campo de mapa do WPForms, use 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 você copiou.
- Em linha 11, substitua
111com o seu ID de formulário real - Em linha 15, substitua
222com o seu ID de campo de mapa real - Em linha 19, substitua
'your-map-id'com o ID do mapa que você copiou do Google Cloud Console (mantenha as aspas ao redor dele)
Depois de salvar o trecho de código com seus valores personalizados, seu campo de mapa usará o estilo personalizado do Google Cloud Console. O mapa exibirá apenas seus marcadores personalizados, sem pontos de interesse, proporcionando uma visão clara e focada de suas localizações.
É isso! Agora você pode ocultar pontos de interesse no seu campo Mapa e mostrar apenas seus marcadores personalizados. Para saber mais maneiras de personalizar seus formulários, consulte nosso guia sobre como personalizar o WPForms com código.