Kas vajate WordPressi saidile interaktiivset kaarti ja tavaline Google Maps lihtsalt ei sobi? Tavaline iframe-kaart ei paku klikitavaid piirkondi, vihjeteateid ega filtreeritavat objektide kataloogi. Ja teie klient soovib kaarti aadressiotsingu ja statistika jaoks värvikoodidega piirkondadega.

MapSVG on üks väheseid WordPressi pluginaid, mis tegeleb kõige sellega ühes tööriistas. Seda kasutab üle 16 000 saidi ja tasuta versioon WordPress.org-is võimaldab proovida peaaegu kõiki põhifunktsioone ilma maksmata. Altpoolt leiate funktsioonide üksikasjaliku ülevaate, praktilise seadistusjuhendi ja ausa hinnangu selle kohta, kellele see plugin sobib ja kes peaks mujale vaatama.

💡 Kiirülevaade:

• Laadige sisseehitatud teegist valmis SVG-kaart või laadige üles oma fail.
• Siduge andmebaasi objektid kohandatud väljadega piirkondadega.
• Seadistage vihjeteated ja hüpikaknad malliredaktori kaudu.
• Vajadusel asetage vektorkaart Google Mapsi peale.
• Sisestage lühikood lehele ja kontrollige tulemust.

Mida MapSVG suudab: põhifunktsioonide ülevaade

Plugina arendaja on Roman Stepanov (RomanCode WordPress.org-is). Projekt on olnud aktiivne alates 2012. aastast ja saab regulaarseid uuendusi: 2026. aasta juuni seisuga on aktuaalne versioon 8.6.6, muudatuste logi järgi ilmub mitu versiooni kuus. See on oluline plugina puhul, mis töötab Google Maps API-ga, sest ilma regulaarsete uuendusteta lähevad kaardid katki iga kord, kui API võti muutub.

100+ Valmis geokalibreeritud kaarti

Pluginaga on kaasas enam kui 100 geokalibreeritud SVG-kaardi teek. Maailmakaart on juba jagatud klikitavateks riikideks. Eraldi on saadaval riikide kaardid jaotustega osariikideks, provintsideks ja piirkondadeks. Samuti on olemas mitu eriotstarbelist kaarti.

Geokalibreerimine tähendab, et iga kaardi ala on seotud reaalsete koordinaatidega. Saate lisada markereid aadressi või laius-/pikkuskraadi järgi ja need paigutuvad täpselt õigesse piirkonda. Ei leia teegist sobivat kaarti? Joonistage SVG Inkscape'is või Adobe Illustratoris, laadige see üles MapSVG-sse ja plugin muudab teie vektori klikitavate tsoonidega interaktiivseks kaardiks.

Andmebaasi objektid kohandatud väljadega

See funktsioon eristab MapSVG-d enamikust WordPressi kaardistamispluginatest. Loote plugina sisseehitatud andmebaasi kirjeid (objekte) mis tahes vajalike väljade komplektiga: tekst, numbrid, pildid, märkeruudud, ripploendid. Seejärel seote objekti konkreetse kaardipiirkonnaga.

Näide: kinnisvarabüroo loob objektid kinnisvara kohta koos aadressi, hinna, pindala ja fotodega. Iga objekt on seotud kaardil oleva piirkonnaga. Külastaja klõpsab alal ja näeb kinnisvarakaarti ilusas hüpikaknas, detailvaates või vihjeteates. Andmete salvestamiseks pole vaja välist pluginat; kõik jääb MapSVG sisse.

Kataloog filtreerimise ja otsinguga

Andmebaasi objekte saab kuvada mitte ainult kaardil, vaid ka filtreeritava kataloogina selle kõrval. Kui kasutaja sisestab otsinguribale päringu või valib rippfiltrist väärtuse, uuenevad kataloog ja kaart sünkroonselt. Kaardipiirkonnale klõpsamine filtreerib kataloogi ja vastupidi.

Premium-versioonid lisavad filtrid kategooria, postiindeksi ja kuupäeva järgi. CSV-import on toetatud ja alates Plus-tasemest saab andmeid otse Google Sheetsist tõmmata (kui allikas uueneb, uueneb kaart automaatselt).

Vektorkaardi ülekate Google Mapsil

Tavalised Google Mapsid iframe'i kaudu ei paku peaaegu mingit kohandamist. MapSVG lahendab selle probleemi radikaalselt: asetate oma interaktiivse SVG-kihi mis tahes tüüpi Google Mapsi peale (satelliit, maastik, teedekaart, hübriid). Vaja on ainult Google Maps API võtit.

Vektorkiht on täielikult klikitav: tsoonid, markerid ja vihjeteated töötavad täpselt nagu tavalisel SVG-kaardil. Tulemuseks on kaart, mis näeb välja nagu Google Maps, kuid käitub nagu täiesti kohandatud veebirakendus. Orientiiride esiletõstmine, interaktiivsed marsruudid ja piirkonnad on kõik seadistatavad.

Sisseehitatud CSS-i, JavaScripti ja Handlebarsi malliredaktorid

Neile, kes töötavad koodiga, pakub MapSVG kolme sisseehitatud redaktorit. CSS-redaktor võimaldab muuta kohtspikri stiile, hüpikaknaid ja markereid, nähes tulemusi reaalajas. JavaScripti-redaktor võimaldab haakuda kaardisündmuste külge (piirkonnale klõps, hõljumine) ja kirjutada vahevara loogikat. Handlebarsi malliredaktor annab täieliku kontrolli kohtspikrite, hüpikakende ja detailivaadete HTML-struktuuri üle.

Praktikas tähendab see, et viie minutiga saab valmis ehitada kohtspikri malli koos foto, hinna ja nupuga „Loe lähemalt". Ning JavaScripti kaudu saab näiteks piirkonnale klõpsamisel saata AJAX-päringu ja laadida andmeid dünaamiliselt.

Juhtpaneel reaalajas eelvaatega

MapSVG liides on WordPressi administraatoris eraldi paneel. Kaardi loomine on samm-sammuline protsess: vali allikas, seadista piirkonnad, värvid, kohtspikrid, avalda. Kõik muudatused ilmuvad eelvaateaknas koheselt; tulemuste nägemiseks ei pea lehte salvestama ega värskendama.

Navigeerimine toimub rippmenüü kaudu, mis on korraldatud sektsioonide kaupa (Piirkonnad, Värvid, Mallid, Seaded). Algajatele võib liides tunduda üle jõu käiv, kuna valikuid on palju, kuid pärast esimest tundi muutub loogika selgeks.

Kaardid rasterpiltidest

MapSVG ei tööta mitte ainult vektor-SVG-dega, vaid ka tavaliste PNG- ja JPEG-failidega. Sisseehitatud joonistustööriistad võimaldavad rasterpildi peal alasid piiritleda ning need muutuvad klikitavateks tsoonideks. See avab stsenaariumid, millega vektorkaardid hakkama ei saa: interaktiivsed korruseplaanid, istekohaplaanid, tehnilised joonised, marsruudid ja linnaplaanid.

Tehniliselt teete hoone plaanist foto, piiritlete ruumid tööriistaga „Joonista piirkond", lisate sildid ja saategi interaktiivse plaani, kus ruumile klõpsamine näitab selle kohta infot. Ürituste ja kinnisvara valdkonna kliendid oskavad seda hinnata.

Praktiline juhend: paigaldamine ja esimese kaardi loomine

MapSVG paigaldamine ei erine ühestki teisest WordPressi pluginast. Erinevus seisneb kaardi loomise protsessis: liidese loogika mõistmiseks pead vähemalt korra menüüst läbi käima. Pärast seda läheb kõik libedalt.

1. Samm. Plugina paigaldamine

Laadi MapSVG alla WordPress.org-ist (tasuta Lite-versioon) või osta premium-versioon saidilt mapsvg.com. Seejärel WordPressi administraatoris: Plugins → Add New → Upload Plugin.

Klõpsa Upload (1), vali plugina ZIP-fail (2) ja Install Now (3):

Oota, kuni paigaldamine lõpeb, ja aktiveeri:

Valmis. Administraatori külgmenüüsse ilmub MapSVG kirje; klõpsa sellel.

2. Samm. Kaardi loomine valmismalli põhjal

MapSVG paneeli avakuval näed valikuid: vali valmiskaart, loo Google'i kaart (pärast API võtme sisestamist), ehita pildikaart, laadi üles oma SVG-fail või laadi SVG-fail Google Mapsi peale. Paneeli ülaosas olevad lingid Tutorials ja Support viivad dokumentatsiooni ja toe juurde.

Vali New SVG Map ja leia rippmenüüst vajalik kaart. Selles näites kasutame Hiina kaarti, mis on jagatud provintsideks ja täiesti töövalmis.

Järgmisel ekraanil täida kaardi pealkiri. Siin saad seadistada ka suurust, reageerivust (vaikimisi sees), vihjeid ja hüpikaknaid. Piirkonnad on juba klikitavad ja kaart on kohandamiseks valmis.

3. Samm. Värvide seadistamine

Mine Menu → Colors. Värvipalett võimaldab määrata värve piirkondadele, taustale, joonele ja olekutele (hover, active). Piiranguid pole; vali mis tahes toone.

Kui oled värvid paika pannud, klõpsa Save Ctrl + S:

Kaart värvub eelvaate aknas kohe ümber. Mõni klikk ja värvilahendus ongi valmis.

4. Samm. Vihjete lisamine

Loo vihje mall. Mine Menu → Templates → Region Tooltip. Handlebarsi malliredaktor toetab {{title}} silti, mis väljastab piirkonna nime. Lihtne mall:

1
Region: <strong>{{title}}</strong>

Klõpsa Salvesta Ctrl + S. Seejärel luba tööriistavihjed: Menüü → Seaded → Tööriistavihjed.

Nüüd, kui hõljud piirkonna kohal, ilmub selle nimega tööriistavihje. See on põhistsenaarium. Fotode, hindade ja muude andmete lisamiseks tööriistavihjesse on vaja kohandatud välju.

Samm 5. Kohandatud väljad andmebaasiobjektide kaudu

MapSVG võimaldab lisada piirkondadele kohandatud välju. Väljatüüpide hulka kuuluvad tekst, tekstiala, märkeruut, pildid ja teised. Loome pildivälja.

Mine Menüü → Piirkonnad ja klõpsa Muuda välju:

Klõpsa nuppu Pilt, et lisada pilditüüpi väli, seejärel Salvesta väljad:

Ära unusta klõpsata Salvesta Ctrl + S. Seejärel lülitu vahekaardile Loend:

Luba Muuda piirkondi režiim ja klõpsa soovitud piirkonda (näiteks Nei Mongol). Paremale ilmub uus Pildid väli. Klõpsa Sirvi:

Lisa pilte WordPressi meediateegi kaudu ja klõpsa Vali pildid:

Süsteem suunab su tagasi piirkonna muutmise ekraanile. Klõpsa OK (1), seejärel Salvesta Ctrl + S (2) ja lülitu tagasi Eelvaate režiimi (3):

Pildid on lisatud, kuid need ei ilmu veel tööriistavihjesse; pead malli uuendama. Mine Menüü → Mallid → Piirkonna tööriistavihje ja asenda kood:

1
Region: <strong>{{title}}</strong><br />
2
First image:<br />
3
<img src="{{images.0.thumbnail}}" width="40px" /><br /><br />
4
All images:<br />
5
{{#each images}}
6
    <img src="{{thumbnail}}" width="40px" />
7
{{/each}}

Salvesta mall. Nüüd, kui liigutad hiire Nei Mongoli kohale, näitab vihje üleslaaditud pilte:

6. Samm. Kaardi avaldamine oma saidil

Salvesta kõik muudatused. Mine Lehed → Lisa uus, klõpsa redaktori kohal nuppu MapSVG:

Vali nimekirjast loodud kaart ja plugin lisab lühikoodi [mapsvg id="17" title="China"]. Avalda leht ja kontrolli tulemust esivaates:

Kaart on täielikult responsiivne; mobiilseadmetel töötavad piirkonnad ja vihjed funktsionaalsust kaotamata. Lühikoodi saab lisada igasse postitusse, lehele või vidinasse ja kaart laadib korrektselt.

⁉️🤔 Korduma kippuvad küsimused

Kas MapSVG töötamiseks on vaja Google Maps API võtit?

Ainult siis, kui plaanid kasutada Google Mapsi kihti. Valmis SVG-kaartidega teegist ja oma SVG-failidega töötamiseks ei ole võtit vaja. Kui sul on siiski Google Mapsi vaja, hangi API võti Google Cloud Console'ist ja sisesta see plugina seadetesse; protsess võtab paar minutit.

Kas ma saan üles laadida oma SVG-faili?

Jah. Joonista kaart Inkscape'is või Adobe Illustratoris, salvesta SVG-na, laadi MapSVG-sse. Plugin muudab vektorkujundid automaatselt klikitavateks piirkondadeks. Kui kaart ei ole geokalibreeritud, ei tööta aadressipõhised markerid; need tuleb paigutada käsitsi.

Mis vahe on tasulisel ja tasuta versioonil?

Tasuta Lite-versioon annab piiramatult kaarte ja markereid, vihjed, hüpikaknad ja kohandatud väljad. Tasulised astmed lisavad funktsioone järk-järgult: Starter (49 $/aastas) lisab filtreeritava kataloogi ja kohandatud mallid; Plus (99 $/aastas) lisab Google Sheetsi integratsiooni, ACF-i ja Metaboxi; Pro (199 $/aastas) lisab markerite klasterdamise ja esivaates redigeerimise; Elite (299 $/aastas) lisab REST API ja MySQL andmeallikad. Saadaval on ka eluaegsed litsentsid hinnavahemikus 99 $ kuni 599 $.

Kas plugin sobib mitte-programmeerijatele?

Lihtsa piirkondade ja vihjetega kaardi saab kindlasti teha ilma koodita; liides on visuaalne. Aga kui sul on vaja kohandatud vihjemalle (Handlebars) või stiilimist (CSS), tuleb kasuks minimaalne HTML-i mõistmine. Dokumentatsioon aadressil mapsvg.com/docs on kirjutatud näidetega ja tugi vastab kiiresti.

Kas kaardid aeglustavad saiti?

Ei. SVG-kaart on vektor, mis kaalub kilobaitte, mitte megabaitte. Renderdamine toimub JavaScripti abil kliendi poolel. Suure markerite arvu (sadu või tuhandeid) korral soovitame lubada klasterdamise, mis on saadaval alates Pro-astmest.

Kuidas on lood toe ja uuendustega?

Plugina uuendusi tuleb mitu korda kuus; WordPress.org-i muudatuste logi näitab, et arendaja parandab aktiivselt vigu ja lisab funktsioone. Tugi on saadaval sisseehitatud vestluse kaudu otse administraatori paneelist (pärast aktiveerimist). Kasutajad märgivad arvustustes, et vastused on kiired, kuid ajavööndite erinevuse tõttu võib vastus võtta paar tundi.

Kas MapSVG-d tasub osta: lõplik hinnang

MapSVG on spetsialiseeritud tööriist, mis on pea ja õlgade võrra üle tavalistest Google Mapsi pluginatest, kui vajad tõelist interaktiivsust: klikitavaid piirkondi, filtreeritavaid katalooge ja kohandatud vihjeid. Kui sinu ülesanne on „sisesta asukohakaart", on plugin ülepingutatud. Kui sinu ülesanne on kinnisvarakaart, kaupluste otsija, interaktiivne piirkondlik statistika või istekohaplaan, on MapSVG üks parimaid valikuid WordPressi turul.

Tasuta Lite-versioon katab stsenaariumid, mille eest teised pluginad juba raha küsivad: piiramatud kaardid ja markerid, kohandatud väljad, vihjed ja hüpikaknad. See on haruldane heldus freemium-mudeli puhul; saad käivitada projekti ilma eelarveta ja osta paketi siis, kui vajad filtreid, kataloogi või Google Sheetsi integratsiooni.

Meie kogemus: pärast ühte õhtut dokumentatsiooniga oli Hiina kaart koos vihjete ja piltidega valmis. Jah, liides ei ole esmapilgul intuitiivne (palju valikuid ja menüüsid), kuid õpikõver on lühike. Sisseehitatud CSS/JS/Handlebars redaktorid on arendajatele tõeline õnnistus: pole vaja teemafailides sorida.

Kui otsid WordPressi kaardipluginat ega taha kuu aja pärast tasuta versiooni piirangutesse joosta, alusta MapSVG Lite'iga WordPress.org-is. Ja kui vajad alternatiivi, vaata meie WordPressi kaardipluginate ülevaadet, kus võrdlesime tosinat võimalust erinevate kasutusjuhtude jaoks.