Tarvitsetko WordPress-sivustollesi interaktiivisen kartan, eikä tavallinen Google Maps riitä? Tavallinen iframe-kartta ei tarjoa klikattavia alueita, työkaluvihjeitä eikä suodatettavaa kohdehakemistoa. Ja asiakkaasi haluaa kartan, jossa on osoitehaku ja värikoodatut alueet tilastoja varten.

MapSVG on yksi harvoista WordPress-lisäosista, joka hoitaa kaiken tämän yhdellä työkalulla. Se on käytössä yli 16 000 sivustolla, ja WordPress.orgin ilmaisversiolla voit kokeilla lähes kaikkia perusominaisuuksia maksutta. Alta löydät yksityiskohtaisen erittelyn ominaisuuksista, käytännön asennusoppaan ja rehellisen arvion siitä, kenelle tämä lisäosa sopii ja kenen kannattaa etsiä muualta.

💡 Pikakatsaus:

• Lataa valmis SVG-kartta sisäänrakennetusta kirjastosta tai tuo oma tiedostosi.
• Linkitä tietokantaobjektit ja mukautetut kentät alueisiin.
• Määritä työkaluvihjeet ja ponnahdusikkunat mallieditorin kautta.
• Aseta vektorikartta tarvittaessa Google Mapsin päälle.
• Lisää shortcode sivulle ja tarkista lopputulos.

Mitä MapSVG osaa: keskeisten ominaisuuksien erittely

Lisäosan on kehittänyt Roman Stepanov (RomanCode WordPress.orgissa). Projekti on ollut aktiivinen vuodesta 2012 ja saa säännöllisiä päivityksiä: kesäkuussa 2026 uusin versio on 8.6.6, ja muutoslokin mukaan julkaisuja tulee useita kuukaudessa. Tällä on merkitystä lisäosalle, joka toimii Google Maps API:n kanssa, sillä ilman säännöllisiä päivityksiä kartat hajoavat aina API-avaimen muuttuessa.

Yli 100 valmista, geokalibroitua karttaa

Lisäosan mukana tulee yli sadan geokalibroidun SVG-kartan kirjasto. Maailmankartta on valmiiksi jaettu klikattaviin maihin. Maakartat, joissa on jaottelu osavaltioihin, provinsseihin ja alueisiin, ovat saatavilla erikseen. Mukana on myös useita erikoiskarttoja.

Geokalibrointi tarkoittaa, että jokainen kartan alue on sidottu todellisiin koordinaatteihin. Voit lisätä merkkejä osoitteen tai leveys- ja pituusasteen perusteella, ja ne osuvat tarkasti oikealle alueelle. Etkö löydä oikeaa karttaa kirjastosta? Piirrä SVG Inkscapessa tai Adobe Illustratorissa, tuo se MapSVG-ohjelmaan, ja lisäosa muuttaa vektorisi interaktiiviseksi kartaksi, jossa on klikattavat vyöhykkeet.

Tietokantaobjektit ja mukautetut kentät

Tämä ominaisuus erottaa MapSVG:n useimmista WordPressin karttalisäosista. Luot merkintöjä (objekteja) lisäosan sisäänrakennettuun tietokantaan millä tahansa tarvitsemillasi kentillä: tekstiä, numeroita, kuvia, valintaruutuja, pudotusvalikoita. Sitten linkität objektin tiettyyn kartan alueeseen.

Esimerkki: kiinteistönvälitys luo objekteja kohteille, joissa on osoite, hinta, pinta-ala ja kuvat. Jokainen objekti linkitetään kartan alueeseen. Käyttäjä klikkaa aluetta ja näkee kohdekortin kauniissa ponnahdusikkunassa, yksityiskohtanäkymässä tai työkaluvihjeessä. Tietojen tallennukseen ei tarvita ulkoista lisäosaa; kaikki pysyy MapSVG:n sisällä.

Hakemisto suodatuksella ja haulla

Tietokantaobjektit voidaan näyttää paitsi kartalla myös suodatettavana hakemistona sen vieressä. Kun käyttäjä kirjoittaa hakupalkkiin kyselyn tai valitsee arvon pudotusvalikon suodattimesta, hakemisto ja kartta päivittyvät synkronoidusti. Kartan alueen klikkaaminen suodattaa hakemistoa ja päinvastoin.

Premium-versiot lisäävät suodattimet kategorian, postinumeron ja päivämäärän mukaan. CSV-tuonti on tuettu, ja Plus-tasosta alkaen tietoja voidaan hakea suoraan Google Sheetsistä (kun lähde päivittyy, kartta päivittyy automaattisesti).

Vektorikartta Google Mapsin päällä

Tavalliset Google Maps -kartat iframen kautta tarjoavat lähes nolla muokkausmahdollisuutta. MapSVG ratkaisee tämän ongelman radikaalisti: asetat oman interaktiivisen SVG-tasosi minkä tahansa tyyppisen Google Mapsin päälle (satelliitti, maasto, tiekartta, hybridi). Tarvitset vain Google Maps API -avaimen.

Vektoritaso on täysin klikattava: vyöhykkeet, merkit ja työkaluvihjeet toimivat aivan kuten tavallisella SVG-kartalla. Lopputulos on kartta, joka näyttää Google Mapsilta mutta käyttäytyy kuin täysin räätälöity verkkosovellus. Maamerkkien korostus, interaktiiviset reitit ja alueet ovat kaikki määritettävissä.

Sisäänrakennetut CSS-, JavaScript- ja Handlebars-mallieditorit

Koodin kanssa työskenteleville MapSVG tarjoaa kolme sisäänrakennettua editoria. CSS-editorilla voit muuttaa työkaluvihjeiden tyylejä, ponnahdusikkunoita ja markkereita ja nähdä tulokset reaaliajassa. JavaScript-editorilla voit kytkeytyä karttatapahtumiin (alueen klikkaus, hover) ja kirjoittaa middleware-logiikkaa. Handlebars-malline-editori antaa täyden hallinnan työkaluvihjeiden, ponnahdusikkunoiden ja tietonäkymien HTML-rakenteeseen.

Käytännössä tämä tarkoittaa, että työkaluvihjemallineen, jossa on kuva, hinta ja "Lue lisää" -painike, voi rakentaa viidessä minuutissa. Ja JavaScriptin kautta voit esimerkiksi lähettää AJAX-pyynnön aluetta klikattaessa ja ladata dataa dynaamisesti.

Hallintapaneeli reaaliaikaisella esikatselulla

MapSVG:n käyttöliittymä on oma paneelinsa WordPressin hallintanäkymässä. Kartan luominen on vaiheittainen prosessi: valitse lähde, määritä alueet, värit, työkaluvihjeet, julkaise. Kaikki muutokset näkyvät välittömästi esikatseluikkunassa; sinun ei tarvitse tallentaa ja päivittää sivua nähdäksesi tulokset.

Navigointi toimii osioittain järjestetyn pudotusvalikon kautta (Alueet, Värit, Mallineet, Asetukset). Käyttöliittymä voi tuntua aloittelijasta ylivoimaiselta, koska vaihtoehtoja on paljon, mutta ensimmäisen tunnin jälkeen logiikka selkeytyy.

Kartat bittikarttakuvista

MapSVG toimii paitsi vektori-SVG:iden myös tavallisten PNG- ja JPEG-tiedostojen kanssa. Sisäänrakennetuilla piirtotyökaluilla voit jäljittää alueita bittikarttakuvan päälle, ja niistä tulee klikattavia vyöhykkeitä. Tämä avaa skenaarioita, joihin vektorikartat eivät pysty: interaktiiviset pohjapiirrokset, istumakartat, piirustukset, reitit ja kaupunkisuunnitelmat.

Teknisesti otat valokuvan rakennuksen pohjapiirroksesta, jäljität huoneet "Piirrä alue" -työkalulla, lisäät tekstit, ja saat interaktiivisen pohjapiirroksen, jossa huonetta klikkaamalla näytetään siitä tietoa. Tapahtuma- ja kiinteistöalan asiakkaat arvostavat tätä.

Käytännön opas: asennus ja ensimmäisen kartan luominen

MapSVG:n asentaminen ei eroa muista WordPress-lisäosista. Ero on kartan luontiprosessissa: sinun täytyy käydä valikko läpi vähintään kerran ymmärtääksesi käyttöliittymän logiikan. Sen jälkeen kaikki sujuu kuin itsestään.

Vaihe 1. Lisäosan asentaminen

Lataa MapSVG WordPress.orgista (ilmainen Lite-versio) tai osta premium-versio osoitteesta mapsvg.com. Siirry sitten WordPressin hallintapaneelissa: Lisäosat → Lisää uusi → Lisää lisäosa.

Klikkaa Lataa (1), valitse lisäosan ZIP-tiedosto (2) ja Asenna nyt (3):

Odota asennuksen valmistumista ja aktivoi:

Valmista. MapSVG-kohta ilmestyy hallintapaneelin sivupalkin valikkoon; klikkaa sitä.

Vaihe 2. Kartan luominen valmiista pohjasta

MapSVG-paneelin aloitusnäytöllä näet vaihtoehdot: valitse valmis kartta, luo Google-kartta (sen jälkeen kun olet lisännyt API-avaimen), rakenna kuvakartta, lataa oma SVG-tiedosto tai lataa SVG-tiedosto Google Mapsin päälle. Paneelin yläreunan Oppaat- ja Tuki-linkit johtavat dokumentaatioon ja tukeen.

Valitse Uusi SVG-kartta ja etsi tarvitsemasi kartta pudotusvalikosta. Tässä esimerkissä käytämme Kiinan karttaa, joka on jaettu maakuntiin ja täysin käyttövalmis.

Täytä seuraavalla näytöllä kartan otsikko. Täällä voit myös määrittää koon, responsiivisuuden (oletuksena käytössä), työkaluvihjeet ja ponnahdusikkunat. Alueet ovat jo klikattavissa, ja kartta on valmis muokattavaksi.

Vaihe 3. Värien määrittäminen

Siirry kohtaan Valikko → Värit. Väripaletin avulla voit asettaa värit alueille, taustalle, reunaviivalle ja tiloille (hover, aktiivinen). Rajoituksia ei ole; valitse mitkä tahansa sävyt.

Kun olet asettanut värit, klikkaa Tallenna Ctrl + S:

Kartta värjäytyy välittömästi uudelleen esikatseluikkunassa. Muutamalla klikkauksella värimaailma on valmis.

Vaihe 4. Työkaluvihjeiden lisääminen

Luo työkaluvihjepohja. Siirry kohtaan Valikko → Pohjat → Alueen työkaluvihje. Handlebars-pohjaeditori tukee {{title}}-tagia, joka tulostaa alueen nimen. Peruspohja:

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

Paina Tallenna Ctrl + S. Ota sitten työkaluvihjeet käyttöön: Valikko → Asetukset → Työkaluvihjeet.

Kun nyt viet hiiren alueen päälle, näkyviin tulee työkaluvihje, jossa lukee sen nimi. Tämä on perusskenaario. Jos haluat lisätä työkaluvihjeeseen kuvia, hintoja ja muita tietoja, tarvitset mukautettuja kenttiä.

Vaihe 5. Mukautetut kentät tietokantaobjektien kautta

MapSVG:n avulla voit lisätä alueille mukautettuja kenttiä. Kenttätyyppejä ovat muun muassa teksti, tekstialue, valintaruutu, kuvat ja muut. Luodaan kuvakenttä.

Siirry kohtaan Valikko → Alueet ja napsauta Muokkaa kenttiä:

Napsauta Kuva-painiketta lisätäksesi kuvatyyppisen kentän ja sitten Tallenna kentät:

Muista napsauttaa Tallenna Ctrl + S. Vaihda sitten Lista-välilehdelle:

Ota käyttöön Muokkaa alueita -tila ja napsauta haluamaasi aluetta (esimerkiksi Nei Mongol). Oikealle ilmestyy uusi Kuvat-kenttä. Napsauta Selaa:

Lisää kuvia WordPressin mediakirjaston kautta ja napsauta Valitse kuvat:

Järjestelmä palauttaa sinut alueen muokkausnäyttöön. Napsauta OK (1), sitten Tallenna Ctrl + S (2) ja vaihda takaisin Esikatselu-tilaan (3):

Kuvat on lisätty, mutta ne eivät vielä näy työkaluvihjeessä; sinun täytyy päivittää mallipohja. Siirry kohtaan Valikko → Mallipohjat → Alueen työkaluvihje ja korvaa koodi:

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}}

Tallenna pohja. Kun nyt viet hiiren Nei Mongolin päälle, työkaluvihje näyttää ladatut kuvat:

Vaihe 6. Kartan julkaiseminen sivustollasi

Tallenna kaikki muutokset. Mene kohtaan Sivut → Lisää uusi, napsauta editorin yläpuolella olevaa MapSVG-painiketta:

Valitse luotu kartta listasta, niin lisäosa lisää shortcoden [mapsvg id="17" title="China"]. Julkaise sivu ja tarkista lopputulos julkisella puolella:

Kartta on täysin responsiivinen; mobiililaitteilla alueet ja työkaluvihjeet toimivat ilman toiminnallisuuden menetystä. Shortcoden voi lisätä mihin tahansa artikkeliin, sivuun tai widgettiin, ja kartta latautuu oikein.

⁉️🤔 Usein kysytyt kysymykset

Tarvitsenko Google Maps API -avaimen MapSVG:n toimintaan?

Vain, jos aiot käyttää Google Maps -tasoa. Valmiiden SVG-karttojen käyttöön kirjastosta ja omista SVG-tiedostoista et tarvitse avainta. Jos tarvitset Google Mapsia, hae API-avain Google Cloud Consolesta ja syötä se lisäosan asetuksiin; toimenpide vie pari minuuttia.

Voinko ladata oman SVG-tiedoston?

Kyllä. Piirrä kartta Inkscapessa tai Adobe Illustratorissa, tallenna SVG-muodossa, lataa MapSVG:hen. Lisäosa muuttaa vektorimuodot automaattisesti klikattaviksi alueiksi. Jos karttaa ei ole geokalibroitu, osoitteeseen perustuvat merkinnät eivät toimi; sinun täytyy sijoittaa ne manuaalisesti.

Mitä eroa on maksullisella ja ilmaisella versiolla?

Ilmainen Lite-versio antaa rajattomasti karttoja ja merkintöjä, työkaluvihjeet, ponnahdusikkunat ja mukautetut kentät. Maksulliset tasot lisäävät ominaisuuksia asteittain: Starter (49 $/vuosi) tuo suodatettavan hakemiston ja mukautetut pohjat; Plus (99 $/vuosi) lisää Google Sheets -integraation, ACF:n ja Metaboxin; Pro (199 $/vuosi) lisää merkintöjen klusteroinnin ja julkisen puolen muokkauksen; Elite (299 $/vuosi) lisää REST API:n ja MySQL-tietolähteet. Saatavilla on myös elinikäisiä lisenssejä, joiden hinnat vaihtelevat 99 dollarista 599 dollariin.

Sopiiko lisäosa koodaamattomille?

Peruskartan alueineen ja työkaluvihjeineen voi ehdottomasti tehdä ilman koodia; käyttöliittymä on visuaalinen. Mutta kun tarvitset mukautettuja työkaluvihjepohjia (Handlebars) tai tyylittelyä (CSS), minimaalinen HTML-ymmärrys auttaa. Dokumentaatio osoitteessa mapsvg.com/docs on kirjoitettu esimerkkien kera, ja tuki vastaa nopeasti.

Hidastavatko kartat sivustoa?

Eivät. SVG-kartta on vektori, joka painaa kilotavuja, ei megatavuja. Renderöinti tapahtuu JavaScriptillä selainpäässä. Suurella merkintämäärällä (satoja tai tuhansia) suosittelemme klusteroinnin käyttöönottoa, joka on saatavilla Pro-tasosta alkaen.

Entä tuki ja päivitykset?

Lisäosa päivittyy useita kertoja kuukaudessa; WordPress.orgin muutosloki osoittaa, että kehittäjä korjaa bugeja ja lisää ominaisuuksia aktiivisesti. Tuki on saatavilla sisäänrakennetun chatin kautta suoraan hallintapaneelista (aktivoinnin jälkeen). Käyttäjät mainitsevat arvosteluissa, että vastaukset ovat nopeita, mutta aikaerojen vuoksi vastaus voi kestää muutaman tunnin.

Kannattaako MapSVG ostaa: lopullinen arvio

MapSVG on erikoistyökalu, joka on päätä pidempi tavallisia Google Maps -lisäosia silloin, kun tarvitset aitoa interaktiivisuutta: klikattavia alueita, suodatettavia hakemistoja ja mukautettuja työkaluvihjeitä. Jos tehtäväsi on "lisää reittikartta", lisäosa on liioittelua. Jos tehtäväsi on kiinteistökartta, toimipistehaku, interaktiivinen aluetilasto tai istumapaikkakartta, MapSVG on yksi parhaista vaihtoehdoista WordPress-markkinoilla.

Ilmainen Lite-versio kattaa skenaarioita, joista muut lisäosat jo veloittavat: rajattomat kartat ja merkinnät, mukautetut kentät, työkaluvihjeet ja ponnahdusikkunat. Tämä on harvinaista anteliaisuutta freemium-mallissa; voit käynnistää projektin ilman budjettia ja ostaa lisenssin, kun tarvitset suodattimia, hakemistoa tai Google Sheets -integraatiota.

Kokemuksemme: yhden illan dokumentaatioon perehtymisen jälkeen Kiinan kartta työkaluvihjeineen ja kuvineen oli valmis. Kyllä, käyttöliittymä ei ole intuitiivinen ensisilmäyksellä (paljon valintoja ja valikoita), mutta oppimiskäyrä on lyhyt. Sisäänrakennetut CSS/JS/Handlebars-editorit ovat lahja kehittäjille: ei tarvitse kaivella teematiedostoja.

Jos etsit WordPress-karttalisäosaa etkä halua törmätä ilmaisversion rajoituksiin kuukaudessa, aloita MapSVG Litestä WordPress.orgissa. Ja jos tarvitset vaihtoehdon, tutustu koosteeseemme WordPress-karttalisäosista, jossa vertailimme tusinaa vaihtoehtoa eri käyttötapauksiin.