Cum să adăugați cu ușurință căutarea locației la un site web director în WordPress

Există multe modalități diferite de a vă îmbunătăți site-ul de director și una dintre ele este activarea căutării bazate pe locație. Dacă rulați un director sau un site de anunț similar cu Yelp, TripAdvisor, Craigslist sau orice alt similar care necesită căutarea bazată pe locație, puteți face acest lucru cu ușurință integrându-l cu Google Maps. Este o caracteristică esențială pentru unii utilizatori, deoarece aceștia pot căuta produse, servicii sau locuri din zona lor. De asemenea, platforma Google Maps are o limită lunară gratuită care ar trebui să fie suficientă dacă site-ul tău web primește trafic moderat.

În acest tutorial pas cu pas, vom explica cum să adăugați căutarea locației pe site-ul dvs. director. Vom folosi HivePress, un plugin WordPress gratuit care vă permite să creați un site web de director într-o clipă. De asemenea, va folosi ListingHive, o temă gratuită de director WordPress, împreună cu extensia HivePress Geolocation pentru integrarea cu Google Maps.

Cu toate acestea, dacă aveți deja un site web de director creat cu un alt plugin sau temă, puteți sări peste primii pași și derulați la „Cum să remediați „Hopa! Ceva n-a mers bine. Această pagină nu a încărcat corect Google Maps secțiunea ” ” pentru depanarea celor mai frecvente erori.

Deci, să trecem la primul pas!

Instalarea HivePress

În primul rând, trebuie să instalați HivePress. Îl puteți instala ca orice alt plugin gratuit în WordPress. Pur și simplu navigați la secțiunea Plugin-uri > Adăugați nou și găsiți-l cu bara de căutare, apoi instalați-l și, în sfârșit, activați-l făcând clic pe butonul „Activare”. După ce ați terminat cu instalarea, puteți trece la pasul următor - instalarea extensiilor.

De asemenea, dacă vi se pare dificil, puteți urmări screencast-ul de mai jos pentru a instala HivePress direct din tabloul de bord WordPress.

Instalarea extensiilor

Următorul pas este instalarea extensiei de geolocalizare pentru a permite utilizatorilor să caute în listă după locație. Pentru a-l instala, treceți pur și simplu peste secțiunea HivePress și faceți clic pe linkul „Extensii”. Găsiți extensia de geolocalizare în listă, faceți clic pe butonul „Instalare” și, în final, activați extensia.

De asemenea, următorul screencast arată procesul comun de instalare a extensiilor HivePress, astfel încât să îl puteți urma pas cu pas.

Crearea unui nou proiect

După ce ați terminat cu instalarea pluginului și extensia de geolocație, este timpul să creați un proiect pe Google Cloud Platform. Presupunând că aveți deja un cont Google, ar trebui să puteți accesa acest tablou de bord fără probleme. Cu toate acestea, dacă nu aveți unul, atunci este esențial să vă creați un cont Google.

Acum trebuie să creați un proiect făcând clic pe butonul „Creați proiect”, apoi denumiți-l și, în final, faceți clic pe butonul „Creați”.

Configurarea facturării

Acum, dacă nu aveți un cont de facturare la Google, trebuie să creați unul nou pentru a activa facturarea proiectului. Dar, nu vă faceți griji, nu trebuie să plătiți nimic acum, este doar una dintre cerințele pentru utilizarea API-ului Google Maps. Pur și simplu urmați linkul și completați toate câmpurile formularului, inclusiv detaliile metodei de plată.

Veți primi un credit gratuit de 200 USD în fiecare lună și, în majoritatea cazurilor, este mai mult decât suficient pentru a acoperi cheltuielile pentru utilizarea serviciilor Google pe site-ul dvs. web. De asemenea, este posibil să setați limite și notificări, astfel încât să nu depășiți niciodată creditul gratuit. Puteți verifica prețurile pentru a vă face o idee mai bună despre cum funcționează și pentru a vă asigura că puteți utiliza hărțile gratuit.

După ce adăugați informațiile de facturare, veți primi o fereastră pop-up cu tipurile de API-uri pe care doriți să le activați. Selectați Hărți și Locuri ca în captura de ecran de mai jos și faceți clic pe butonul „Activare”. De asemenea, dacă nu există o fereastră pop-up, puteți activa aceste API-uri prin pagina Bibliotecă API-uri Google.

Crearea unei chei API

Următorul pas este să creați o cheie API pentru site-ul dvs. web. Pentru a face acest lucru, navigați la pagina Acreditări și selectați proiectul dvs.

Pe pagina Acreditări, puteți vedea cheia API deja generată. Dacă tocmai v-ați creat contul de facturare, este posibil ca o cheie să fie generată automat. În acest caz, puteți pur și simplu să faceți clic pe el pentru a edita. Cu toate acestea, dacă nu există nicio cheie API pe pagină, puteți crea una nouă în secțiunea Creare acreditări > cheie API .

Apoi, trebuie să vă configurați cheia API setând restricțiile aplicației. Este esențial deoarece, dacă pur și simplu încorporați cheia, aceasta se va afișa în text simplu în codul sursă al site-ului dvs. De aceea, trebuie să restricționați acest lucru, astfel încât alte persoane să nu poată utiliza cheia dvs. API pentru proiectele lor. Pentru a face acest lucru, adăugați pur și simplu referitorul HTTP pentru a permite solicitările API numai de pe site-ul dvs. web. Pur și simplu setați adresa site-ului dvs., dar adăugați și partea „/*” la sfârșit pentru a permite solicitări API de la oricare dintre subpaginile site-ului, astfel încât Google Maps va funcționa pe toate paginile site-ului dvs.

Acum trebuie să setați restricții API în câmpul următor. Faceți clic pe cheia de restricționare și selectați Maps JavaScript API, Places API, Geocoding API din meniul drop-down. Dacă unele dintre API-urile menționate nu sunt listate, mai întâi trebuie să le activați pe pagina Bibliotecă API Maps. După ce toate cele trei API-uri Google sunt activate și selectate în meniul drop-down, faceți clic pe butonul „Salvare”.

Activarea integrării Google Maps

Asta e! Tocmai ați creat o cheie API, iar finalul este să activați Google Maps pe site-ul dvs. web. În primul rând copiați cheia API pe pagina API-uri și servicii > Acreditări . Acum, dacă utilizați pluginul HivePress, navigați la tabloul de bord WordPress și accesați secțiunea HivePress > Setări > Integrari > Google Maps . Apoi lipiți cheia API în câmpul corespunzător și faceți clic pe butonul „Salvați modificările” pentru a adăuga căutarea locației pe site-ul dvs.

Felicitări! Din acest moment, site-ul dvs. este integrat cu Google Maps, iar acum puteți adăuga locații la listările existente în secțiunea Listări . De asemenea, utilizatorii vor trebui să stabilească locația pentru noile listări adăugate. În plus, există un câmp de căutare a locației pe site-ul dvs. și o hartă Google, astfel încât să îl puteți încerca și să căutați unele înregistrări după locația lor.

Depanare

Dacă există probleme cu cheia API pe care ați creat-o, harta poate afișa mesajul „Hopa! Ceva n-a mers bine. Această pagină nu a încărcat Google Maps corect” eroare. Este o eroare destul de comună, deoarece configurarea unei chei API nu este un proces foarte ușor de utilizat, iar utilizatorii omit adesea câțiva dintre pașii de configurare. Cu toate acestea, îl puteți remedia în cel mai scurt timp dacă cunoașteți rădăcinile problemei.

Pentru a afla motivul acestei erori, trebuie să deschideți Consola JavaScript. Îl puteți deschide cu câteva apăsări de taste care diferă în funcție de browser. Verificați răspunsul pe StackOverflow care explică cum să deschideți Consola JavaScript. Dacă utilizați browserul Chrome, puteți apăsa pur și simplu CTRL+Shift+I pentru a-l deschide. Odată ce îl deschideți, ar trebui să vedeți mesajul de eroare, ceva de genul acesta.

Este important să știți exact ce cauzează eroarea, astfel încât să o puteți remedia. Pot exista mai multe erori diferite, dar vom arăta cum să le rezolvăm pe cele mai frecvente:

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

Cu toate acestea, dacă aveți o eroare care nu este listată mai sus, atunci verificați documentația Mesaje de eroare Google Maps API pentru a afla ce este greșit și cum să o remediați.

MissingKeyMapError

Această eroare înseamnă că nu există nicio cheie API, așa că trebuie să creați una dacă doriți să activați Google Maps pe site-ul dvs. web. Dacă primiți această eroare, vă recomandăm să urmați acest tutorial începând de la primul pas pentru a crea o cheie API și a configura corect hărțile.

InvalidKeyMapError

Această eroare apare atunci când utilizați cheia API greșită. Cel mai probabil l-ați creat, dar nu l-ați adăugat corect pe site-ul dvs. web. Pentru a remedia această eroare, accesați pagina Acreditări și copiați cheia API.

Dacă utilizați pluginul HivePress și extensia sa de geolocație, atunci accesați Tabloul de bord WordPress > HivePress > Setări > Integrari > secțiunea Google Maps , inserați cheia API în câmpul corespunzător și faceți clic pe butonul „Salvați modificările”.

ApiNotActivatedMapError

Dacă primiți acest tip de eroare, înseamnă că nu ați activat API-urile necesare. Există multe API-uri diferite în Biblioteca API Google Maps, așa că trebuie să accesați Bibliotecă și să le activați pe cele necesare pentru proiectul dvs. După ce le activați, nu uitați să le adăugați și la secțiunea Restricții API din setările cheii API din secțiunea Acreditări.

De exemplu, dacă utilizați pluginul HivePress cu extensia sa de geolocalizare și doriți să adăugați căutarea locației pe site-ul dvs. director, trebuie să activați și să permiteți accesul la următoarele API-uri Google: Maps JavaScript API, Places API, Geocoding API . Puteți arunca o privire la captura de ecran cu API-urile necesare.

RefererNotAllowedMapError

Această eroare apare dacă restricțiile de referință API nu sunt setate corect. De exemplu, dacă hărțile funcționează pe o pagină a site-ului dvs. și nu funcționează pe altele, atunci cel mai probabil v-ați confruntat cu aceeași problemă.

Vestea bună este că ați configurat și ați introdus corect o cheie API și că trebuie să remediați un singur detaliu. Accesați pagina Acreditări și faceți clic pe cheia API pentru a o edita. În secțiunea Restricții aplicații, selectați „Referințe HTTP (site-uri web)”. Apoi completați restricțiile site-ului, așa cum se arată mai jos, dar înlocuiți „exemplu” cu numele domeniului dvs. și faceți clic pe butonul „Salvați”. Poate dura până la 5 minute pentru ca setările să intre în vigoare.

Este important să adăugați partea „/*” la sfârșit pentru a permite solicitările API de la oricare dintre subpaginile site-ului web, astfel încât Google Maps să funcționeze pe toate paginile site-ului dvs.

Încă nu funcționează

• Dacă modificați ceva în restricțiile cheii API – așteptați până la 5 minute pentru ca setările să intre în vigoare;
• Dacă există încă o eroare - verificați din nou consola JavaScript pentru mai multe detalii. Ar putea apărea o eroare după ce o rezolvi pe prima;
• De asemenea, puteți încerca să ștergeți memoria cache a browserului.

Concluzie

Asta e! Ei spun că dacă există voință, există o cale. Tocmai ați adăugat o funcție de căutare a locației pe site-ul dvs. director, iar acum utilizatorii dvs. pot căuta listări după locație. Este o caracteristică cu adevărat importantă pentru majoritatea directoarelor. Deși ar putea părea un proces puțin complicat pentru a adăuga Google Maps, merită săratul. Odată ce adăugați căutarea locației pe site-ul dvs. web, aceasta va afecta pozitiv experiența utilizatorului. UX este foarte important pentru orice site web, deoarece este una dintre pietrele de temelie ale unui trafic bun.

După cum puteți vedea, puteți integra Google Maps în site-ul dvs. web fără abilități de codare. Dacă nu v-ați hotărât încă ce plugin să utilizați pentru construirea site-ului dvs. de director, puteți lua în considerare HivePress. Vă permite să creați directoare și să înregistrați site-uri web de orice tip. De asemenea, include deja o extensie gratuită care permite căutarea bazată pe locație și mai multe funcții gratuite pe care le puteți găsi utile.

În plus, nu ezitați să verificați articolele noastre:

• Cele mai populare pluginuri gratuite pentru directoare WordPress
• Top teme de directoare WordPress
• Greșeli de evitat la construirea unui site de director WordPress