Come aggiungere facilmente la ricerca della posizione a un sito Web di directory in WordPress

Esistono molti modi diversi per migliorare il sito Web della tua directory e uno di questi è abilitare la ricerca basata sulla posizione. Se gestisci una directory o un sito Web di annunci simile a Yelp, TripAdvisor, Craigslist o qualsiasi altro simile che richiede la ricerca basata sulla posizione, puoi farlo facilmente integrandolo con Google Maps. È una funzionalità essenziale per alcuni utenti poiché sono in grado di cercare prodotti, servizi o luoghi nella loro zona. Inoltre, la piattaforma Google Maps ha un limite mensile gratuito che dovrebbe essere sufficiente se il tuo sito web riceve un traffico moderato.

In questo tutorial passo dopo passo, spiegheremo come aggiungere la ricerca della posizione al sito Web della tua directory. Utilizzeremo HivePress, un plugin gratuito per WordPress che ti consente di creare un sito Web di directory in un batter d'occhio. Inoltre, utilizzerà ListingHive, un tema di directory WordPress gratuito, insieme all'estensione di geolocalizzazione HivePress per l'integrazione con Google Maps.

Tuttavia, se hai già un sito Web di directory creato con un altro plug-in o tema, puoi saltare i primi passaggi e scorrere fino a "Come risolvere" Oops! Qualcosa è andato storto. Questa pagina non ha caricato correttamente Google Maps” ” sezione per la risoluzione degli errori più comuni.

Quindi, passiamo al primo passaggio!

Installazione di HivePress

Prima di tutto, devi installare HivePress. Puoi installarlo come qualsiasi altro plugin gratuito in WordPress. Basta navigare nella sezione Plugin > Aggiungi nuovo e trovarlo con la barra di ricerca, quindi installarlo e infine attivarlo facendo clic sul pulsante "Attiva". Una volta terminata l'installazione, puoi procedere al passaggio successivo: l'installazione delle estensioni.

Inoltre, se lo trovi difficile, puoi seguire lo screencast qui sotto per installare HivePress direttamente dalla dashboard di WordPress.

Installazione delle estensioni

Il passaggio successivo consiste nell'installare l'estensione di geolocalizzazione per consentire agli utenti di cercare gli elenchi in base alla posizione. Per installarlo, passa semplicemente con il mouse sulla sezione HivePress e fai clic sul collegamento "Estensioni". Trova l'estensione di geolocalizzazione nell'elenco, fai clic sul pulsante "Installa" e infine attiva l'estensione.

Inoltre, il seguente screencast mostra il processo comune di installazione delle estensioni HivePress, quindi puoi seguirlo passo dopo passo.

Creazione di un nuovo progetto

Una volta terminata l'installazione del plug-in e l'estensione di geolocalizzazione, è il momento di creare un progetto su Google Cloud Platform. Supponendo che tu abbia già un account Google, dovresti essere in grado di accedere a questa dashboard senza problemi. Tuttavia, se non ne possiedi uno, è essenziale creare un account Google.

Ora devi creare un progetto facendo clic sul pulsante "Crea progetto", quindi nominarlo e infine fare clic sul pulsante "Crea".

Impostazione della fatturazione

Ora, se non disponi di un account di fatturazione con Google, devi crearne uno nuovo per abilitare la fatturazione del progetto. Ma non preoccuparti, non devi pagare nulla ora, è solo uno dei requisiti per utilizzare l'API di Google Maps. Segui semplicemente il link e compila tutti i campi del modulo, compresi i dettagli del metodo di pagamento.

Riceverai un credito gratuito di $ 200 ogni mese e, nella maggior parte dei casi, è più che sufficiente per coprire le spese per l'utilizzo dei servizi Google sul tuo sito web. Inoltre, è possibile impostare limiti e notifiche, in modo da non superare mai il credito gratuito. Puoi controllare i prezzi per avere un'idea migliore di come funziona e per assicurarti di poter utilizzare le mappe gratuitamente.

Dopo aver aggiunto le informazioni di fatturazione, verrà visualizzata una finestra popup con i tipi di API che desideri abilitare. Seleziona Mappe e Luoghi come nello screenshot qui sotto e fai clic sul pulsante "Abilita". Inoltre, se non è presente alcuna finestra popup, puoi abilitare queste API tramite la pagina Libreria API di Google.

Creazione di una chiave API

Il passaggio successivo consiste nel creare una chiave API per il tuo sito web. Per farlo, vai alla pagina Credenziali e seleziona il tuo progetto.

Nella pagina Credenziali puoi vedere la chiave API già generata. Se hai appena creato il tuo account di fatturazione, è possibile che venga generata automaticamente una chiave. In questo caso, puoi semplicemente fare clic su di esso per modificarlo. Tuttavia, se non è presente alcuna chiave API nella pagina, puoi crearne una nuova nella sezione Crea credenziali > Chiave API .

Successivamente, devi configurare la tua chiave API impostando le restrizioni dell'applicazione. È essenziale perché se incorpori semplicemente la chiave, verrà mostrata in chiaro nel codice sorgente del tuo sito web. Ecco perché devi limitare questo in modo che altre persone non possano usare la tua chiave API per i loro progetti. Per fare ciò, aggiungi semplicemente il referrer HTTP per consentire le richieste API solo dal tuo sito web. Imposta semplicemente l'indirizzo del tuo sito Web, ma aggiungi anche la parte "/*" alla fine per consentire le richieste API da qualsiasi sottopagine del sito Web, quindi Google Maps funzionerà su tutte le pagine del tuo sito Web.

Ora devi impostare le restrizioni API nel campo successivo. Fai clic su Limita chiave e seleziona Maps JavaScript API, Places API, Geocoding API dal menu a discesa. Se alcune delle API menzionate non sono elencate, devi prima abilitarle nella pagina Libreria API di Maps. Una volta abilitate e selezionate tutte e tre le API di Google nel menu a tendina, fare clic sul pulsante "Salva".

Abilitazione dell'integrazione di Google Maps

Questo è tutto! Hai appena creato una chiave API e il tocco finale è abilitare Google Maps sul tuo sito web. Prima di tutto copia la chiave API nella pagina API e servizi > Credenziali . Ora, se stai utilizzando il plug-in HivePress, vai alla dashboard di WordPress e vai alla sezione HivePress > Impostazioni > Integrazioni > Google Maps . Quindi incolla la tua chiave API nel campo appropriato e fai clic sul pulsante "Salva modifiche" per aggiungere la ricerca della posizione al tuo sito web.

Congratulazioni! Da questo momento, il tuo sito web è integrato con Google Maps e ora puoi aggiungere località agli elenchi esistenti nella sezione Annunci . Inoltre, gli utenti dovranno impostare la posizione per gli elenchi appena aggiunti. Inoltre, c'è un campo di ricerca della posizione sul tuo sito web e una mappa di Google, quindi puoi provarlo e cercare alcuni elenchi in base alla loro posizione.

Risoluzione dei problemi

In caso di problemi con la chiave API che hai creato, la mappa potrebbe visualizzare il messaggio "Oops! Qualcosa è andato storto. Questa pagina non ha caricato correttamente Google Maps” errore. È un errore abbastanza comune poiché la configurazione di una chiave API non è un processo molto intuitivo e gli utenti spesso saltano alcuni passaggi di configurazione. Tuttavia, puoi risolverlo in un attimo se conosci le radici del problema.

Per scoprire il motivo di tale errore, devi aprire la Console JavaScript. Puoi aprirlo con pochi tasti che differiscono a seconda del tuo browser. Controlla la risposta su StackOverflow che spiega come aprire la console JavaScript. Se utilizzi il browser Chrome, puoi semplicemente premere CTRL+Shift+I per aprirlo. Una volta aperto, dovresti vedere il messaggio di errore, qualcosa di simile a questo.

È importante sapere esattamente cosa sta causando l'errore in modo da poterlo correggere. Possono esserci diversi errori, ma ti mostreremo come risolvere quelli più frequenti:

• MissingKeyMapError;
• Errore mappa chiave non valido;
• ApiNotActivatedMapError;
• RefererNotAllowedMapError.

Tuttavia, se hai un errore che non è elencato sopra, controlla la documentazione dei messaggi di errore dell'API di Google Maps per scoprire cosa c'è che non va e come risolverlo.

MissingKeyMapError

Questo errore significa che non esiste alcuna chiave API, quindi devi crearne una se desideri abilitare Google Maps sul tuo sito web. Se ricevi questo errore, ti consigliamo di seguire questo tutorial partendo dal primo passaggio per creare una chiave API e impostare correttamente le mappe.

Errore mappa chiave non valido

Questo errore viene visualizzato quando stai utilizzando la chiave API errata. Molto probabilmente l'hai creato ma non l'hai aggiunto correttamente al tuo sito web. Per correggere questo errore, vai alla pagina Credenziali e copia la chiave API.

Se stai utilizzando il plug-in HivePress e la sua estensione di geolocalizzazione, vai alla sezione Dashboard di WordPress > HivePress > Impostazioni > Integrazioni > Google Maps , incolla la tua chiave API nel campo appropriato e fai clic sul pulsante "Salva modifiche".

ApiNotActivatedMapError

Se ricevi questo tipo di errore, significa che non hai abilitato le API richieste. Esistono molte API diverse nella Libreria API di Google Maps, quindi devi andare alla Libreria e abilitare quelle necessarie per il tuo progetto. Dopo averli abilitati, ricorda di aggiungerli anche alla sezione Restrizioni API nelle impostazioni della chiave API nella sezione Credenziali.

Ad esempio, se stai utilizzando il plug-in HivePress con la sua estensione di geolocalizzazione e desideri aggiungere la ricerca della posizione al sito Web della tua directory, devi abilitare e consentire l'accesso alle seguenti API di Google: API JavaScript di Maps, API di Places, API di geocodifica . Puoi dare un'occhiata allo screenshot con le API necessarie.

RefererNotAllowedMapError

Questo errore si verifica se le restrizioni del referrer API non sono impostate correttamente. Ad esempio, se le mappe funzionano su una pagina del tuo sito Web e non su altre, molto probabilmente hai riscontrato lo stesso problema.

La buona notizia è che hai impostato e inserito correttamente una chiave API e c'è solo un piccolo dettaglio che devi correggere. Vai alla pagina Credenziali e fai clic sulla tua chiave API per modificarla. Nella sezione Restrizioni dell'applicazione, seleziona "Riferimenti HTTP (siti web)". Quindi compila le restrizioni del sito web come mostrato di seguito ma sostituisci "esempio" con il tuo nome di dominio e fai clic sul pulsante "Salva". Potrebbero essere necessari fino a 5 minuti prima che le impostazioni abbiano effetto.

È importante aggiungere la parte "/*" alla fine per consentire le richieste API da qualsiasi sottopagine del sito Web, in modo che Google Maps funzioni su tutte le pagine del tuo sito Web.

Ancora non funziona

• Se modifichi qualcosa nelle restrizioni della chiave API, attendi fino a 5 minuti affinché le impostazioni abbiano effetto;
• Se c'è ancora un errore, controlla di nuovo la console JavaScript per maggiori dettagli. Potrebbe esserci un errore dopo aver risolto il primo;
• Puoi anche provare a svuotare la cache del browser.

Conclusione

Questo è tutto! Dicono che se c'è una volontà, c'è un modo. Hai appena aggiunto una funzione di ricerca della posizione al sito Web della tua directory e ora i tuoi utenti possono cercare gli elenchi in base alla posizione. È una caratteristica davvero importante per la maggior parte delle directory. Anche se può sembrare un processo un po' complicato per aggiungere Google Maps, ne vale la pena. Una volta aggiunta la ricerca della posizione al tuo sito web, influirà positivamente sull'esperienza dell'utente. L'esperienza utente è molto importante per qualsiasi sito Web poiché è una delle pietre miliari di un buon traffico.

Come puoi vedere, puoi integrare Google Maps nel tuo sito Web senza alcuna abilità di codifica. Se non hai ancora deciso quale plug-in utilizzare per creare il tuo sito Web di directory, potresti prendere in considerazione HivePress. Ti consente di creare directory ed elencare siti Web di qualsiasi tipo. Inoltre, include già un'estensione gratuita che consente la ricerca basata sulla posizione e molte altre funzionalità gratuite che potresti trovare utili.

Inoltre, sentiti libero di controllare i nostri articoli:

• Plugin di directory WordPress gratuiti più popolari
• I migliori temi delle directory di WordPress
• Errori da evitare durante la creazione di un sito di directory WordPress