Doriți să creați o hartă cu mai multe locații în WordPress cu Elementor și suplimente esențiale?

Să presupunem că aveți o afacere care are deja mai multe sucursale în oraș și doriți să creați o hartă digitală care să arate locația acelor filiale. Dacă aveți un site web bazat pe WordPress, puteți crea o astfel de hartă fără efort. Există un plugin grozav pe care îl puteți folosi pentru a crea o hartă cu mai multe locații: Addons esențiale.

Addons esențiale este un supliment Elementor premium, așa că trebuie și instalat Elementor înainte de a-l putea folosi. Puteți folosi versiunea gratuită a Elementor pentru a crea un card cu modulul Essential Addons.

La versiune gratuită de Essential Addons este de asemenea disponibil. Cu toate acestea, widget-ul pentru a crea o hartă este disponibil numai în versiunea plătită. Puteți descărca versiunea plătită de Essential Addons de pe acesta site oficial.

Vom folosi platforma Google Maps pentru a crea o hartă pe WordPress folosind Essential Addons. Înainte de a începe, asigurați-vă că instalați Elementor și Essential Addons.

Integrați Google Maps cu modulul Essential Addons

Înainte de a putea adăuga o hartă Google Maps cu Essential Addons, trebuie mai întâi să le integrați. Aveți nevoie de o cheie API pentru a integra Google Maps cu modulele Essential Addons.

În primul rând, vizitați Consola API Google și conectați-vă cu contul dvs. Google. Creați un nou proiect făcând clic pe meniul derulant din partea de sus și faceți clic pe PROIECT NOU.

Dați un nume noului proiect și faceți clic pe butonul CREEAZĂ .

creați o hartă cu mai multe locații cu Elementor și Essential Addons

Odată ce noul proiect a fost creat, selectați-l din meniul derulant și faceți clic pe bibliotecă pe panoul din stânga.

creați o hartă cu mai multe locații cu Elementor și Essential Addons

Google împarte API-ul Google Maps Platform în 17 tipuri. Le puteți vedea făcând clic pe link AFIȘAȚI TOATE în secțiune Hărți. Trebuie să activați API-urile în funcție de ceea ce doriți să realizați.

Descoperiți și: Cum să creați un șablon de produs unic personalizat în WooCommerce cu Elementor

În cazul nostru, trebuie să activați următoarele API-uri pentru a adăuga o hartă din Google Maps folosind Essential Addons.

  • Indicații API
  • Geocoding API
  • API JavaScript Maps
  • Locuri API

Pentru a activa un API, selectați un API pe care doriți să îl activați (făcând clic pe el) și faceți clic pe butonul ACTIVATI.

creați o hartă cu mai multe locații cu Elementor și Essential Addons

După ce ați finalizat activarea API-urilor necesare, reveniți la tabloul de bord principal al Consolei API Google și faceți clic Identificatorii pe panoul din stânga. Faceți clic pe butonul Creați acreditări și selectați Cheie API. Copiați cheia API în fereastra pop-up care apare.

Conectați-vă la tabloul de bord WordPress și faceți clic Addons esențiale pe panoul din stânga. Faceți clic pe filă Elemente de și derulați în jos în secțiune Harta Google avansată. Faceți clic pe setări cont și inserați cheia API pe care tocmai ați copiat-o.

Faceți clic pe butonul SALVEAZĂ SETĂRILE pentru a aplica noua modificare.

Începeți să creați harta

Odată ce Google Maps și Essential Addons sunt integrate, puteți începe să creați harta. Pentru a face acest lucru, creați o pagină nouă (Pagini – > Adăugați ) sau un articol nou (Elemente – > Adăugați) și editați-l cu Elementor.

creați o hartă cu mai multe locații cu Elementor

Înainte de a crea pagina, setați aspectul făcând clic pe pictograma roată din colțul din stânga jos pentru a deschide panoul Setări. Setați aspectul din meniul derulant.

Creați o secțiune nouă făcând clic pe butonul plus din caseta de editare. Pentru a avea o zonă mai largă pentru hartă, puteți selecta structura cu o singură coloană. Trageți widgetul EA Google Maps din panoul din stânga către zona de editare.

creați o hartă cu mai multe locații cu Elementor și Essential Addons

Accesați panoul din stânga și setați tipul cardului la marker multiplu.

creați o hartă cu mai multe locații cu Elementor și Essential Addons

Deschideți secțiunea Setări pentru marcajul hărții și faceți clic pe marcatorul de hartă existent pentru a-l edita. Lipiți latitudinea și longitudinea primei locații pe care doriți să o adăugați pe hartă. Setați și titlul, precum și descrierea.

creați o hartă cu mai multe locații cu Elementor

Pentru a obține latitudinea și longitudinea unei locații, deschideți Google Maps și căutați locația (locul) a cărei latitudine și longitudine doriți să obțineți. Odată găsit, faceți clic cu butonul din dreapta al mouse-ului și cu un clic stânga pe numărul care apare în meniul contextual.

Prin urmare, această acțiune vă permite să copiați latitudinea (prima valoare) și longitudinea (a doua valoare).

Când ați terminat de adăugat latitudinea și longitudinea primei locații, faceți clic pe butonul ADĂUGAȚI UN ELEMENT pentru a adăuga o altă locație pe harta dvs.

creați o hartă cu mai multe locații cu Elementor

Deschideți din nou Google Maps și găsiți noua locație pe care doriți să o adăugați pe hartă și copiați longitudinea, precum și longitudinea și lipiți-le în câmpurile respective precum cel de mai sus. Repetați pașii de mai sus pentru a adăuga mai multe locații pe hartă.

Citiți și: Cum să utilizați widgetul Postări al Elementor

Când ați terminat de adăugat locații, deschideți blocul Controale hărților pentru a activa/dezactiva comenzile pe care doriți să le furnizați pe cardul dvs. Puteți seta și nivelul de zoom aici.

creați o hartă cu mai multe locații cu Elementor

De asemenea, puteți deschide blocul Tema hartă pentru a selecta tema Google Maps pe care doriți să o utilizați.

creați o hartă cu mai multe locații cu Elementor și Essential Addons

Până acum ați creat cu succes o hartă cu mai multe locații. Puteți deschide fila Stil pentru a defini înălțimea, precum și lățimea hărții.

creați o hartă cu mai multe locații cu Elementor

Dacă doriți să aveți o hartă cu lățime completă, setați secțiunea care conține harta la lățime completă. Pentru a face acest lucru, faceți clic pe mânerul secțiunii.

creați o hartă cu mai multe locații cu Elementor și Essential Addons

În filă și bloc schemă setați lățimea conținutului la lățime maximăr și decalajul coloanei pe Nicio abatere

creați o hartă cu mai multe locații cu Elementor

Faceți clic pe butonul PUBLICATER în partea de jos a panoului din stânga pentru a vă publica pagina.

Încorporați harta într-o pagină sau postare

Dacă dintr-un motiv oarecare preferați să vă încorporați harta într-o pagină/postare (pagina/postarea creată cu editorul implicit WordPress — Gutenberg), puteți utiliza WordPress plug-in Elementor Blocks pentru Gutenberg. Acest plugin va converti un șablon Elementor într-un bloc Gutenberg.

Pentru a salva harta pe care tocmai ați creat-o ca șablon Elementor, faceți clic pe pictograma săgeată de lângă buton PUBLICARE / ACTUALIZARE și selectați Salvați ca șablon.

creați o hartă cu mai multe locații cu Elementor și Essential Addons

Dă-i modelului un nume și dă clic pe buton ÎNREGISTRATOR.

creați o hartă cu mai multe locații cu Elementor și Essential Addons

Apoi, creați o pagină sau o postare nouă (asigurați-vă că ați instalat Plugin Elementor Blocuri pentru Gutenberg). Adăugați un bloc nou și selectați Biblioteca Elementor și selectați șablonul pe care tocmai l-ați creat.

creați o hartă cu mai multe locații cu Elementor

Remarque: Dacă vedeți un mesaj „Numai în scopuri de dezvoltare” când adăugați un card, asigurați-vă că activați facturarea Google Cloud. Noua politică Google cere dezvoltatorilor să activeze contul de facturare (puteți folosi în continuare API-ul Google Maps gratuit).

Obțineți Elementor Pro acum!!!

Concluzie

Asa de ! Asta este pentru acest articol care vă arată cum să creați o hartă cu mai multe locații cu Elementor. Dacă aveți nelămuriri cu privire la cum să ajungeți acolo, anunțați-le în comentarii.

Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.

Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.

...