Yrityksesi sijainti on yksi tärkeimmistä tiedoista, joita asiakas etsii kotisivuiltasi. Silti yllättävän monella sivustolla osoite on pelkkänä tekstinä jossain sivun alareunassa – ilman karttaa, ilman reittiohjausta, ilman mitään. Kun lisäät Google Mapsin sivuillesi oikein, helpotat asiakkaan matkaa luoksesi ihan konkreettisesti. Samalla sivustosi vaikuttaa ammattimaisemmalta ja hakukoneetkin pitävät siitä.
Tässä artikkelissa käyn läpi, miten Google Maps upotetaan kotisivuille vaihe vaiheelta, mitä sudenkuoppia kannattaa välttää ja miten kartan saa toimimaan nopeasti ilman että se hidastaa koko sivustoa.
Miksi kartta kannattaa lisätä eikä pelkkä osoite riitä
Pelkkä tekstiosoite vaatii asiakkaalta ylimääräisen vaiheen: hänen pitää kopioida osoite, avata Google Maps erikseen ja hakea reitti. Upotettu kartta poistaa tämän kynnyksen kokonaan. Asiakas näkee heti, missä yrityksesi sijaitsee, voi zoomata lähemmäs ja klikata reittiohjausta suoraan kartalta.
Hakukoneoptimoinnin kannalta upotettu Google Maps -kartta vahvistaa myös paikallista näkyvyyttä. Google ymmärtää, että sivustosi liittyy tiettyyn sijaintiin, mikä voi auttaa paikallisissa hakutuloksissa. Ei se mikään taikakeino ole, mutta pieni plussa kuitenkin.
Helpoin tapa: Google Mapsin upotuskoodi
Yksinkertaisin ja ilmainen tapa on käyttää Google Mapsin omaa upotustoimintoa. Tähän ei tarvita API-avainta, rekisteröitymistä eikä koodausosaamista. Näin teet sen:
Avaa Google Maps selaimessa ja hae yrityksesi osoite. Kun oikea paikka näkyy kartalla, klikkaa vasemmasta yläkulmasta hampurilaisvalikkoa tai paina suoraan Jaa-painiketta. Valitse avautuvasta ikkunasta Upota kartta -välilehti. Näet iframe-koodinpätkän, jonka voit kopioida sellaisenaan.
Koodi näyttää suunnilleen tältä: se alkaa iframe-tagilla ja sisältää src-osoitteen, joka osoittaa Google Mapsiin. Voit valita kartan koon pudotusvalikosta – pieni, keskikokoinen, suuri tai mukautettu.
Liitä koodi sivustollesi siihen kohtaan, mihin haluat kartan ilmestyvän. WordPressissä tämä tarkoittaa, että vaihdat editorin tekstinäkymään tai käytät Gutenberg-editorissa mukautettua HTML-lohkoa. Tämä on tärkeä kohta – visuaaliseen editoriin liitetty iframe-koodi ei yleensä toimi, vaan se pitää syöttää nimenomaan HTML-puolelle.
Käytännön kokemus: mikä voi mennä pieleen
Kun ensimmäisen kerran lisäsin asiakkaalle Google Maps -kartan, tein sen niin kuin kaikki ohjeet neuvoivat – kopioin upotuskoodin ja liitin sen sivulle. Kartta näkyi hienosti. Mutta sitten PageSpeed-testi paljasti totuuden: sivun latausaika oli noussut selvästi. Iframe latasi kartan kaikkine skripteineen heti sivun mukana, vaikka kartta oli aivan sivun alalaidassa, minne suurin osa kävijöistä ei edes scrollannut.
Ratkaisu oli yksinkertainen: lisäsin iframe-tagiin loading=”lazy” -attribuutin. Tämä käskee selaimen ladata kartan vasta silloin, kun käyttäjä scrollaa sen lähelle. Ero latausajassa oli heti huomattava. Tämä on pieni asia, mutta aivan kriittinen varsinkin mobiilissa, missä jokainen sekunti merkitsee.
API-avaimella saat enemmän hallintaa
Jos tarvitset kartalta enemmän kuin pelkän sijainnin näyttämisen, kannattaa harkita Google Maps Platform API:a. Sen avulla voit muokata kartan ulkoasua, lisätä omia merkkejä, näyttää useita toimipisteitä tai rakentaa interaktiivisia toimintoja kuten reittihaun.
API-avaimen saat Google Cloud Consolesta. Luot projektin, otat käyttöön Maps JavaScript API:n ja generoit avaimen. Ilmainen kiintiö riittää useimmille pienille yrityksille hyvin – Google antaa kuukaudessa 200 dollarin edestä ilmaisia karttanäyttöjä, mikä tarkoittaa käytännössä noin 28 000 kartan latausta kuukaudessa.
Muista kuitenkin rajoittaa API-avain toimimaan vain omalta domainiltasi. Tämä tehdään Cloud Consolen asetuksista. Ilman rajoitusta kuka tahansa voisi käyttää avaintasi ja syödä kiintiösi – tai pahimmillaan aiheuttaa kustannuksia.
WordPress-sivustolla kartan lisääminen
WordPressissä on käytännössä kolme tapaa lisätä kartta. Ensimmäinen on jo mainittu upotuskoodi, jonka liität mukautettuun HTML-lohkoon. Toinen on käyttää lisäosaa kuten WP Google Maps tai Maps Widget for Google Maps. Nämä tekevät prosessista hieman helpomman, koska voit hallita karttaa suoraan WordPressin hallintapaneelista.
Kolmas vaihtoehto on teemakohtainen. Monet modernit WordPress-teemat sisältävät valmiiksi karttalohkon tai -widgetin, johon syötät pelkän osoitteen ja teema hoitaa loput.
Itse suosin yleensä yksinkertaisinta tapaa eli suoraa upotuskoodia. Jokainen lisäosa on yksi potentiaalinen tietoturvariski ja päivitystarve lisää. Jos et tarvitse kartan muokkausta tai useita sijainteja, lisäosa on usein turha.
Kartan koko ja responsiivisuus
Upotuskoodi tulee yleensä kiinteillä pikselimitoilla, esimerkiksi 600 pikseliä leveä ja 450 pikseliä korkea. Mobiilissa tämä voi näyttää huonolta, koska kartta joko vuotaa yli tai jää turhan pieneksi.
Helpoin korjaus on asettaa iframen leveydeksi 100 prosenttia ja korkeus kiinteäksi pikseliarvoksi, esimerkiksi 300 tai 400 pikseliä. Näin kartta skaalautuu aina näytön leveyden mukaan. Voit tehdä tämän suoraan iframe-tagin style-attribuutissa tai sivuston CSS-tyyleissä.
GDPR ja evästeet – tämä unohtuu monelta
Tässä tulee kohta, jonka moni ohittaa kokonaan. Google Maps -upotus lataa sisältöä Googlen palvelimilta ja asettaa evästeitä käyttäjän selaimeen. EU:n tietosuoja-asetuksen mukaan tähän tarvitaan käyttäjän suostumus.
Käytännössä tämä tarkoittaa, että karttaa ei saisi ladata ennen kuin kävijä on hyväksynyt evästeet. Monet evästehallintatyökalut kuten CookieBot tai Complianz osaavat blokata iframe-upotukset automaattisesti ja näyttää tilalla placeholder-kuvan tekstillä ”Hyväksy evästeet nähdäksesi kartan”.
Jos haluat kiertää evästeongelman kokonaan, voit käyttää upotus-URL:ssa googlen evästeettömän domainin versiota tai linkittää karttaan pelkällä tekstilinkillä ilman upotusta. Tämä ei ole yhtä näyttävä ratkaisu, mutta on täysin evästeongelmaton.
Usein kysytyt kysymykset
Onko Google Mapsin upottaminen ilmaista? Kyllä, perusupotus iframe-koodilla on täysin ilmaista eikä vaadi API-avainta. API-avain tarvitaan vasta, jos haluat muokata kartan toimintoja tai ulkoasua.
Hidastaako kartta sivustoani? Voi hidastaa, jos et käytä lazy loading -tekniikkaa. Lisää iframe-tagiin loading=”lazy”, niin ongelma poistuu käytännössä kokonaan.
Pitääkö kartta mainita tietosuojaselosteessa? Kyllä pitää. Google Maps -upotus on kolmannen osapuolen palvelu, joka käsittelee kävijän tietoja. Mainitse se tietosuojaselosteessa ja varmista, että evästehallintatyökalu huomioi sen.
Voinko näyttää kartalla useita toimipisteitä? Perusupotuksella voit luoda Google Mapsissa oman kartan, johon lisäät useita merkkejä, ja upottaa sen kokonaisuudessaan. API:n kautta tämä onnistuu vielä joustavammin.
Toimiiko upotus kaikilla selaimilla? Kyllä. Iframe-pohjainen upotus toimii kaikilla moderneilla selaimilla sekä mobiilissa että työpöydällä.
Kartan lisääminen kotisivuille on lopulta pieni työ, jolla on iso vaikutus. Se helpottaa asiakkaan arkea, parantaa sivuston uskottavuutta ja tukee paikallista hakukonenäkyvyyttä. Tee se kerralla oikein, niin sinun ei tarvitse palata asiaan enää myöhemmin.