Como adicionar facilmente a pesquisa de localização a um site de diretório no WordPress

Há muitas maneiras diferentes de melhorar seu site de diretório e uma delas é habilitar a pesquisa baseada em localização. Se você estiver executando um diretório ou site de classificados semelhante ao Yelp, TripAdvisor, Craigslist ou qualquer outro semelhante que exija a pesquisa baseada em localização, você pode fazer isso facilmente integrando-o ao Google Maps. É um recurso essencial para alguns usuários, pois eles podem pesquisar produtos, serviços ou locais em sua área. Além disso, a plataforma do Google Maps tem um limite mensal gratuito que deve ser suficiente se o seu site receber tráfego moderado.

Neste tutorial passo a passo, explicaremos como adicionar a pesquisa de local ao seu site de diretório. Vamos usar o HivePress, um plugin WordPress gratuito que permite criar um site de diretório em um piscar de olhos. Além disso, usará o ListingHive, um tema de diretório gratuito do WordPress, juntamente com a extensão HivePress Geolocation para integração com o Google Maps.

No entanto, se você já possui um site de diretório criado com outro plugin ou tema, pode pular as primeiras etapas e rolar até “Como corrigir” Oops! Algo deu errado. Esta página não carregou o Google Maps corretamente” ” para solucionar os erros mais comuns.

Então, vamos para o primeiro passo!

Instalando o HivePress

Primeiro de tudo, você precisa instalar o HivePress. Você pode instalá-lo como qualquer outro plugin gratuito no WordPress. Basta navegar até a seção Plugins > Adicionar Novo e encontrá-lo com a barra de pesquisa, depois instalar e finalmente ativá-lo clicando no botão "Ativar". Assim que terminar a instalação, você pode prosseguir para a próxima etapa – instalar as extensões.

Além disso, se você achar difícil, você pode seguir o screencast abaixo para instalar o HivePress diretamente do painel do WordPress.

Instalando extensões

A próxima etapa é instalar a extensão Geolocation para permitir que os usuários pesquisem listagens por localização. Para instalá-lo, basta passar o mouse sobre a seção HivePress e clicar no link “Extensões”. Encontre a extensão de geolocalização na lista, clique no botão “Instalar” e, finalmente, ative a extensão.

Além disso, o screencast a seguir mostra o processo comum de instalação de extensões HivePress, para que você possa segui-lo passo a passo.

Criando um novo projeto

Depois de concluir a instalação do plug-in e a extensão de geolocalização, é hora de criar um projeto no Google Cloud Platform. Supondo que você já tenha uma conta do Google, você poderá acessar este painel sem problemas. No entanto, se você não tiver uma, é essencial se inscrever em uma conta do Google.

Agora você precisa criar um projeto clicando no botão “Criar projeto”, depois nomeá-lo e, finalmente, clicar no botão “Criar”.

Configurando o faturamento

Agora, se você não tiver uma conta de faturamento no Google, precisará criar uma nova para ativar o faturamento do projeto. Mas, não se preocupe, você não precisa pagar nada agora, é apenas um dos requisitos para usar a API do Google Maps. Basta seguir o link e preencher todos os campos do formulário, incluindo os detalhes da forma de pagamento.

Você receberá um crédito gratuito de US$ 200 todos os meses e, na maioria dos casos, é mais do que suficiente para cobrir as despesas de uso dos serviços do Google em seu site. Além disso, é possível configurar limites e notificações, para que você nunca ultrapasse o crédito gratuito. Você pode verificar o Preço para ter uma ideia melhor de como funciona e garantir que você possa usar os mapas gratuitamente.

Depois de adicionar suas informações de faturamento, você verá uma janela pop-up com os tipos de API que deseja ativar. Selecione Mapas e Locais como na imagem abaixo e clique no botão “Ativar”. Além disso, se não houver uma janela pop-up, você poderá ativar essas APIs na página da Biblioteca de APIs do Google.

Como criar uma chave de API

A próxima etapa é criar uma chave de API para seu site. Para fazer isso, navegue até a página Credenciais e selecione seu projeto.

Na página Credenciais, você pode ver a chave de API já gerada. Se você acabou de criar sua conta de faturamento, uma chave pode ser gerada automaticamente. Nesse caso, você pode simplesmente clicar nele para editar. No entanto, se não houver uma chave de API na página, você poderá criar uma nova na seção Criar credenciais > Chave de API .

Em seguida, você precisa configurar sua chave de API definindo as restrições do aplicativo. É essencial porque se você simplesmente incorporar a chave, ela será exibida em texto simples no código-fonte do seu site. É por isso que você precisa restringir isso para que outras pessoas não possam usar sua chave de API para seus projetos. Para fazer isso, basta adicionar o referenciador HTTP para permitir as solicitações de API apenas do seu site. Basta definir o endereço do seu site, mas também adicionar a parte “/*” no final para permitir solicitações de API de qualquer uma das subpáginas do site, para que o Google Maps funcione em todas as páginas do seu site.

Agora você precisa definir as restrições da API no próximo campo. Clique em Restringir chave e selecione Maps JavaScript API, Places API, Geocoding API no menu suspenso. Se algumas das APIs mencionadas não estiverem listadas, você precisará habilitá-las primeiro na página da Biblioteca de APIs do Google Maps. Depois que todas as três APIs do Google estiverem habilitadas e selecionadas no menu suspenso, clique no botão "Salvar".

Ativando a integração do Google Maps

É isso! Você acabou de criar uma chave de API e o toque final é ativar o Google Maps em seu site. Antes de tudo, copie a chave de API na página APIs e serviços > Credenciais . Agora, se você estiver usando o plugin HivePress, navegue até o painel do WordPress e vá para a seção HivePress > Configurações > Integrações > Google Maps . Em seguida, basta colar sua chave de API no campo apropriado e clicar no botão “Salvar alterações” para adicionar a pesquisa de localização ao seu site.

Parabéns! A partir deste momento, seu site está integrado ao Google Maps, e agora você pode adicionar locais a listagens existentes na seção Listagens . Além disso, os usuários terão que definir o local para as listagens recém-adicionadas. Além disso, há um campo de pesquisa de localização em seu site e um mapa do Google, para que você possa experimentá-lo e pesquisar algumas listagens por sua localização.

Solução de problemas

Se houver algum problema com a chave de API que você criou, o mapa poderá exibir a mensagem “Oops! Algo deu errado. Esta página não carregou o Google Maps corretamente” . É um erro bastante comum, pois configurar uma chave de API não é um processo muito amigável e os usuários geralmente ignoram algumas das etapas de configuração. No entanto, você pode corrigi-lo em pouco tempo se souber as raízes do problema.

Para descobrir o motivo desse erro, você precisa abrir o JavaScript Console. Você pode abri-lo com algumas teclas que diferem dependendo do seu navegador. Verifique a resposta no StackOverflow que explica como abrir o Console JavaScript. Se você usa o navegador Chrome, basta pressionar CTRL+Shift+I para abri-lo. Depois de abri-lo, você deverá ver a mensagem de erro, algo como esta.

É importante saber exatamente o que está causando o erro para que você possa corrigi-lo. Pode haver vários erros diferentes, mas mostraremos como resolver os mais frequentes:

• MissingKeyMapError;
• InvalidKeyMapError;
• ApiNotActivatedMapError;
• RefererNotAllowedMapError.

No entanto, se você tiver um erro que não esteja listado acima, verifique a documentação de mensagens de erro da API do Google Maps para descobrir o que está errado e como corrigi-lo.

MissingKeyMapError

Esse erro significa que não há nenhuma chave de API, portanto, você precisa criar uma se quiser ativar o Google Maps em seu site. Se você receber esse erro, recomendamos que você siga este tutorial desde a primeira etapa para criar uma chave de API e configurar os mapas corretamente.

InvalidKeyMapError

Este erro aparece quando você está usando a chave de API errada. Muito provavelmente você o criou, mas não o adicionou ao seu site corretamente. Para corrigir esse erro, acesse a página Credentials e copie a API Key.

Se você estiver usando o plug-in HivePress e sua extensão de geolocalização, vá para a seção Painel do WordPress > HivePress > Configurações > Integrações > Google Maps , cole sua chave de API no campo apropriado e clique no botão "Salvar alterações".

ApiNotActivatedMapError

Se você receber esse tipo de erro, significa que você não ativou as APIs necessárias. Existem muitas APIs diferentes na Biblioteca de APIs do Google Maps, portanto, você precisa acessar a Biblioteca e ativar as que são necessárias para seu projeto. Depois de habilitá-los, lembre-se de adicioná-los também à seção Restrições de API nas configurações de chave de API na seção Credenciais.

Por exemplo, se você estiver usando o plug-in HivePress com sua extensão de geolocalização e quiser adicionar pesquisa de localização ao seu site de diretório, será necessário habilitar e permitir o acesso às seguintes APIs do Google: Maps JavaScript API, Places API, Geocoding API . Você pode dar uma olhada na captura de tela com as APIs necessárias.

RefererNotAllowedMapError

Este erro ocorre se as restrições do referenciador da API não estiverem definidas corretamente. Por exemplo, se os mapas funcionarem em uma página do seu site e não funcionarem em outras, provavelmente você enfrentou o mesmo problema.

A boa notícia é que você configurou e inseriu uma chave de API corretamente, e há apenas um pequeno detalhe que você precisa corrigir. Vá para a página Credenciais e clique em sua chave de API para editá-la. Na seção Restrições do aplicativo, selecione “Referenciadores HTTP (sites)”. Em seguida, preencha as restrições do site conforme mostrado abaixo, mas substitua “exemplo” pelo seu nome de domínio e clique no botão “Salvar”. Pode levar até 5 minutos para que as configurações entrem em vigor.

É importante adicionar a parte “/*” no final para permitir solicitações de API de qualquer uma das subpáginas do site, para que o Google Maps funcione em todas as páginas do seu site.

Ainda não funciona

• Se você alterar algo em suas restrições de chave de API – aguarde até 5 minutos para que as configurações entrem em vigor;
• Se ainda houver um erro, verifique o console JavaScript novamente para obter mais detalhes. Pode haver um erro depois de resolver o primeiro;
• Você também pode tentar limpar o cache do navegador.

Conclusão

É isso! Dizem que se há vontade, há um caminho. Você acabou de adicionar um recurso de pesquisa de local ao seu site de diretório e agora seus usuários podem pesquisar listagens por local. É um recurso muito importante para a maioria dos diretórios. Embora possa parecer um processo um pouco complicado adicionar o Google Maps, vale a pena. Depois de adicionar a pesquisa de localização ao seu site, isso afetará positivamente a experiência do usuário. UX é muito importante para qualquer site, pois é um dos pilares do bom tráfego.

Como você pode ver, você pode integrar o Google Maps em seu site sem nenhuma habilidade de codificação. Se você ainda não decidiu qual plugin usar para construir seu site de diretório, você pode considerar o HivePress. Ele permite que você crie diretórios e sites de listagem de qualquer tipo. Além disso, já inclui uma extensão gratuita que permite a pesquisa baseada em localização e vários outros recursos gratuitos que você pode achar úteis.

Além disso, sinta-se à vontade para verificar nossos artigos:

• Plugins de diretório WordPress gratuitos mais populares
• Principais temas de diretórios do WordPress
• Erros a evitar ao construir um site de diretório WordPress