Cum se face o hartă Google cu mai mulți pini în WordPress

Publicat: 2025-07-23

Adăugarea unei hărți pe site -ul dvs. web vă poate ajuta vizitatorii să vă găsească cu ușurință locațiile de afaceri sau de evenimente. Dacă afacerea dvs. are mai multe locații, este posibil să doriți să le arătați tuturor pe aceeași hartă. Acesta este locul în care utilizarea mai multor pini pe o hartă Google ar putea deveni utilă.

Dacă site -ul dvs. web este construit cu Elementar, nu va trebui să faceți prea multe probleme în adăugarea mai multor pini pe harta Google. În schimb, puteți adăuga cu ușurință câte doriți. Procesul este destul de simplu, chiar și pentru începători.

În această postare, vom acoperi un tutorial detaliat despre cum să faceți o hartă Google cu mai mulți pini în WordPress cu Elementar. Dar înainte de asta, vom acoperi câteva cuvinte despre ce și când ar trebui să utilizați Google Maps cu mai mulți pini pe site -urile dvs. WordPress.

De ce să folosiți Google Maps cu mai mulți pini pe site -ul dvs. WordPress

Why Use Google Maps with Multiple Pins on Your WordPress Site

Utilizarea Google Maps cu mai mulți pini poate îmbunătăți site -ul dvs. în multe feluri. Nu este vorba doar de a arăta locații. Poate ajuta utilizatorii să -și construiască încrederea și să vă facă site -ul mai util, deoarece vă pot găsi cu ușurință magazinele. Iată câteva motive principale pentru care ar trebui să -l luați în considerare.

1. Arată -ți toate locațiile într -un singur loc

Dacă afacerea dvs. are mai multe sucursale, magazine sau birouri, mai mulți pini vă pot ajuta să le afișați pe toate pe o singură hartă. Acest lucru face mai ușor pentru vizitatori să vadă fiecare locație dintr -o privire fără a trece între diferite hărți sau pagini.

2. Ajută utilizatorii să găsească cel mai apropiat loc

Când utilizatorii văd toate locațiile de pe o singură hartă, ei îl pot găsi rapid pe cea care este cea mai apropiată de ele. Acest lucru le poate îmbunătăți experiența și îi poate ajuta să ia măsuri mai repede, cum ar fi vizitarea magazinului dvs. sau rezervarea unei întâlniri.

3. Economisiți timp pentru vizitatori

În loc să enumerați fiecare adresă una câte una în text simplu, le puteți afișa vizual cu pini. Acest lucru economisește timp atât pentru tine, cât și pentru vizitatorii tăi. De asemenea, face ca site -ul dvs. să pară mai profesionist și modern.

4. Boost Local SEO cu date despre locație

Google Maps vă poate ajuta cu SEO -ul local al site -ului dvs. web. Când adăugați adrese reale pe harta dvs., acesta spune motoarelor de căutare despre locațiile dvs. de afaceri. Acest lucru poate ajuta site -ul dvs. să apară în rezultatele căutării locale. Explorați cum să îmbunătățiți SEO -ul local cu HappyAddons.

Boost Local SEO with Location Data

5. Faceți site -ul dvs. mai interactiv

O hartă cu mai mulți pini arată mai interactiv și mai dinamic decât doar un text simplu. Vizitatorii pot mări, face clic pe pini și pot explora harta. Acest lucru face ca site-ul dvs. să fie mai captivant și mai ușor de utilizat.

6. Perfect pentru întreprinderi bazate pe servicii sau multi-ramuri

Dacă rulați un lanț de restaurante, clinici, magazine sau puncte de livrare, mai mulți pini vă ajută să vă explicați clar acoperirea. Așa cum s -a spus mai sus, aceasta creează încredere și îi ajută pe utilizatori să aleagă cel mai apropiat loc.

Premise pentru realizarea unei hărți Google cu mai mulți pini cu Elementar

Să clarificăm un lucru la început. Elementar are un widget încorporat numit Google MAP . Dar caracteristicile sale sunt foarte limitate. Nu puteți adăuga mai mulți pini pe hartă folosind acest widget implicit. Deci, pentru a face asta, veți avea nevoie de un addon suplimentar.

O opțiune excelentă este HappyAddons . Oferă un widget numit Google Maps Advanced , care vă permite să creați și să adăugați cu ușurință mai mulți pini pe harta dvs. fără probleme.

Deci, în total, aveți nevoie de următoarele instrumente de pe site -ul dvs. pentru acest tutorial.

  • Element
  • Happyaddons
  • HappyAddons Pro

Happyaddons Pro este necesar, deoarece harta Google avansată este un widget premium al pluginului. După ce sunt instalate și activate pe site -ul dvs., începeți să urmați tutorialul, așa cum este menționat mai jos. Explorați toate celelalte widget -uri ale HappyAddons.

Cum se face o hartă Google cu mai mulți pini în WordPress: tutorial pas cu pas

În această secțiune, vom explica pas cu pas cum să faceți o hartă Google cu mai mulți pini în WordPress cu pluginuri Elementar și HappyAddons. Vom decora această secțiune cu capturi de ecran necesare, astfel încât să puteți înțelege procesul complet. Continuați să citiți!

Pasul 01: Deschideți o pagină și găsiți widgetul avansat Google Map

Deschideți postarea sau pagina în care doriți să creați harta Google cu mai mulți pini. Găsiți widgetul Advance Google Map pe panoul Elementar. Trageți -l și aruncați -l pe pânza elementului.

Use the Advanced Google Map widget to create multiple pins

Pasul 02: Obțineți cheia API Google

După ce widgetul este adăugat la pânză, vi se va cere să configurați datele de acreditare pentru afișarea hărții Google. Pentru a începe acest lucru, faceți clic pe opțiunea de acreditare în secțiunea Setări generale de pe panou.

Get credential for the Advanced Google Map

Vei fi dus la secțiunea de acreditare a HappyAddons din backend -ul site -ului web. Găsiți opțiunea Google Map . Apoi, apăsați opțiunea GET API .

Get Google Map API Key

Veți veni pe pagina Google Cloud.

Google Cloud Page

Acum, trebuie să găsiți „hărți API JavaScript”. Pentru aceasta, Type Maps JavaScript API în caseta de căutare. Odată ce apare opțiunea, faceți clic pe ea .

Find Maps JavaScript API

După ce ați venit la pagina API JavaScript Maps, activați opțiunea .

Enable Maps JavaScript API

Apăsați butonul Acord și continuați . Înainte de asta, puteți selecta țara dvs. Am estompat -o pentru cazul nostru.

Configure JavaScript Account

Cheia API Google nu este gratuită din punct de vedere tehnic. Trebuie să vă completați informațiile de facturare pentru a obține API -ul.

Notă (cum este gratuit): Deși nu este gratuit din punct de vedere tehnic, veți primi jetoane echivalente cu 200 USD pe lună fără costuri . Cu acest jeton, harta Google poate fi încărcată sau vizualizată de până la 28.000 de ori . Numai dacă această limită de vizualizare/încărcare este încrucișată, cardul dvs. va fi încărcat.

Complete the billing information

După aceea, vi se va oferi un pop -up. Trebuie să oferiți câteva informații despre afacerea dvs. unde va fi utilizată această hartă. După ce ați terminat, faceți clic pe butonul Trimiteți din colțul din dreapta jos al pop-up.

Fill in your industry-related information

Cheia API Google MAP va apărea instantaneu pe ecran cu un nou pop -up. Copiați cheia API .

Copy the Google Map API key

Reveniți la opțiunea cheie API HappyAddons Google și lipiți codul dvs. acolo. Apăsați pe butonul Salvați modificări la final.

Paste the Google Map API key to HappyAddons

Acum, vino pe pânza Elementar și reîmprospătați -o/reîncărcați -o. Harta Google va apărea pe pânză.

Google map appears on the Elementor Canvas

Verificați cum să creați o cronologie în WordPress cu Elementar.

Pasul 03: Adăugați mai mulți pini pe hartă

În mod implicit, pe hartă este afișat un singur pin. Pentru a adăuga și afișa mai mulți pini pe hartă, extindeți secțiunea Marker Map de pe panou.

Expand the Map Marker section on the panel

După extinderea secțiunii de marcaj de hartă, puteți adăuga cât mai mulți pini doriți făcând clic pe butonul + Adăugare element .

Add more pins to the Google Map

Acum, plasând valori pentru latitudine și longitudine, puteți seta cu precizie pinii cu exactitate pentru fiecare loc.

Add latitude and longitude to pins on Google Map

Pasul 04: Configurați setările hărții

În același mod, extindeți secțiunea Setări de hartă .

Configure Map Settings

Veți găsi o mulțime de opțiuni în această secțiune.

Mag Settings options of the Advanced Google Map widget

Acum, explorați cu amabilitate fiecare opțiune, comicând și opriți pentru a vedea cum funcționează, astfel încât să puteți rămâne în sfârșit cu cele care se potrivesc nevoilor de design.

Aflați cum să creați o galerie de imagini cu defilare automată în WordPress.

Pasul 05: Stilizați widgetul avansat Google Map

Când toate setările și piesele de conținut sunt făcute, veniți în fila Style . De aici, puteți personaliza înălțimea, lățimea, tipul de frontieră, raza de frontieră și mai multe opțiuni.

Stylize the Advanced Google Map Widget

În același mod, extindeți și alte opțiuni și faceți personalizările necesare, deoarece doriți să schimbați aspectul pinilor.

Stylize the other options of the Advanced Google Map widget

Pasul 06: Previzualizați designul

Când designul este finalizat, înainte de a -l publica online, previzualizați -l pentru a vedea dacă este necesară o corecție sau modificare. Puteți vedea că widgetul funcționează bine la sfârșitul nostru în videoclipul atașat mai jos.

Astfel, puteți face o hartă Google cu mai mulți pini în WordPress cu Elementar.

Sfaturi avansate pentru harta Google cu mai mulți pini

După ce ați adăugat mai mulți pini pe harta Google, puteți face mai multe lucruri pentru ca harta să funcționeze mai bine pentru vizitatorii dvs. și site -ul dvs. web. Aceste sfaturi avansate vă vor ajuta să faceți ca harta dvs. să pară mai profesională, să îmbunătățească experiența utilizatorului și chiar să vă susțineți eforturile SEO locale.

Advanced Tips for Google Map with Multiple Pins

1. Utilizați imagini personalizate în loc de pictograme

În loc de pinul roșu implicit, încercați să utilizați pictograme sau imagini personalizate pentru fiecare locație. HappyAddons vă permite să faceți acest lucru din fila conținut> Secțiunea Marker Map. Imaginile și pictogramele personalizate vă pot face harta mai clară și mai atractivă.

2. Zoom și setări centrale

Reglați nivelul de zoom și centrul hărții dvs. pentru a afișa toate pinii în mod corespunzător. Dacă unii pini sunt departe, asigurați -vă că nivelul de zoom este suficient de larg, astfel încât toate să fie vizibile atunci când harta se încarcă. Acest lucru oferă utilizatorilor o imagine de ansamblu completă, fără a fi nevoie să mutați harta manual.

3. Faceți-l mobil-friendly

Verificați întotdeauna cum arată harta dvs. pe dispozitivele mobile. Asigurați -vă că se încarcă rapid, pinii pot fi făcuți clic și căsuțele de informații pot fi citite pe ecrane mici. O hartă care funcționează bine atât pe desktop, cât și pe mobil, va menține mai mulți utilizatori fericiți.

4. Embed hărți pe paginile de contact sau de locație

Nu lăsați harta pe o singură pagină. Puteți reutiliza aceeași hartă încorporat -o pe alte pagini precum „Contactați -ne”, „Locațiile noastre” sau „Vizitați -ne”. Acest lucru îi ajută pe utilizatori să găsească locul potrivit oriunde se află pe site -ul dvs.

Aflați cum să creați o pagină web dinamică în WordPress cu Elementar.

Concluzie

Realizarea unei hărți Google cu mai mulți pini ar putea fi un pas sau o parte simplă în designul dvs. web, dar poate avea o impresie de lungă durată. Nu numai că poate ajuta vizitatorii să -ți găsească locațiile, dar și să sporească scorul SEO local și să facă site -ul dvs. să pară mai profesionist.

Cu ajutorul pluginurilor Elementar și HappyAddons, le puteți adăuga cu ușurință pe site -ul dvs. web fără prea multă dificultate. Este atât de simplu încât chiar și începătorii pot face acest lucru doar urmând tutorialul acoperit mai sus. Dacă mai aveți întrebări fără răspuns, anunțați -ne prin caseta de comentarii de mai jos.

Vom reveni la tine foarte curând cu răspunsuri viabile. Vă mulțumim că ați fost alături de noi până la sfârșit. Spuneți -ne ce subiect doriți să acoperim în următoarea postare.