Resumo de IA
Você quer ocultar pontos de interesse (POIs) como restaurantes, lojas e outros negócios no seu Campo de Mapa para que apenas 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 estilização de mapas 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 do 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 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 seu mapa escolhendo entre Claro ou Escuro. Se desejar, você também pode selecionar um tema opcional como Monocromático para aplicar estilização adicional. Depois de fazer suas seleções, clique no botão Personalizar para abrir o editor de estilo.
Assim que o editor de estilo for aberto, encontre e clique na categoria Pontos de interesse. Isso se expande para revelar uma lista de tipos individuais de Pontos de interesse (POI), como Emergência, Entretenimento, Comida e bebida, Hospedagem, Recreação, Varejo e outros.
Para ocultar POIs, clique no ícone de olho no lado direito da tela para cada categoria que você deseja ocultar. Você pode ocultar todos os POIs de uma vez clicando no ícone de olho ao lado da categoria principal Pontos de Interesse, ou pode ocultar seletivamente tipos específicos de POI clicando no ícone de olho ao lado de cada categoria individual.
Após configurar seu estilo de mapa, clique em Salvar.
Obtendo seu ID de Mapa
Assim que seu estilo for publicado, você precisará criar um ID de Mapa e associá-lo ao seu estilo para usá-lo no WPForms.
Para fazer isso, navegue até a seção Gerenciamento de Mapas na barra lateral esquerda e clique em Criar ID de Mapa no seu Google Cloud Console.
Na caixa de diálogo que aparece, insira um nome descritivo para seu ID de Mapa, selecione JavaScript como o tipo de Mapa e escolha Vector entre as opções disponíveis.
Após concluir, clique em Salvar para criar o novo ID de mapa.
Assim que seu ID de Mapa for criado, role para baixo na página do ID de Mapa até a seção Estilos de Mapa. Clique no ícone de lápis ao lado do estilo de mapa Padrão do Google.
Isso abre uma barra lateral onde você precisará 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 este 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 de 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.
- 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
'seu-mapa-id'pelo ID do mapa que você copiou do Google Cloud Console (mantenha as aspas ao redor dele)
Após 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 nenhum ponto de interesse, proporcionando uma visualização limpa e focada de suas localizações.
É isso! Agora você pode ocultar pontos de interesse em seu Campo de Mapa e mostrar apenas seus marcadores personalizados. Para mais maneiras de personalizar seus formulários, confira nosso guia sobre personalização do WPForms com código.