Interaktiivisen kartan luominen WordPressissä – Qode Interactive

Vaikka digitaalisesta läsnäolosta on tullut pakollinen useimmille yrityksille, on sanomattakin selvää, että kartta kivijalka-sijaintiisi on edelleen enemmän kuin hyödyllinen. Saadaksesi siitä parhaan hyödyn, voit jopa muotoilla Google-karttasi verkkosivustosi yleiseen ulkoasuun sopivaksi. Interaktiivisella kartalla siirryt kuitenkin askeleen pidemmälle: annat käyttäjillesi enemmän vapautta löytää omia tapojaan tavoittaa sinut ja suunnitella matkojaan heille parhaiten sopivalla tavalla. Puhumattakaan siitä, että vuorovaikutus tekee käyttäjäkokemuksesta tyydyttävämmän ja houkuttelee kävijöitä pidempiin käyttöistuntoihin. Tässä artikkelissa näytämme sinulle kaksi tapaa lisätä interaktiivinen kartta WordPress-verkkosivustollesi – käyttämällä Google My Mapsia ja käyttämällä erityistä laajennusta.

Interaktiivisen kartan lisääminen WordPressiin Google My Mapsin avulla

Yksinkertaisin tapa asentaa interaktiivinen kartta on käyttää Googlen My Maps -palvelua. Ensimmäinen asia, joka sinun on tehtävä, on mennä Google My Maps ja napsauta +Luo uusi kartta.

Tämä vie sinut karttaeditoriin. Yläosan valikon avulla voit lisätä reittejä, merkkejä, viivoja, ohjeita ja mitata etäisyyksiä. Jokaisessa kartassa voi olla enintään 10 000 viivaa, muotoa tai paikkaa. Vasemmalla olevassa pääosiossa voit lisätä tasoja (jopa 2 000 viivaa, muotoa tai paikkaa tasoa kohden), valita Peruskartta yhdeksän vaihtoehdon välillä ja lopuksi nimeä karttasi.

Annamme kartallemme nimen ”Kuinka tavoittaa meidät” ja lisäämme lyhyen kuvauksen, jonka jälkeen tallennamme tekemämme muutokset.

Seuraavaksi kiinnitämme neulan merkitsemään sijaintimme. Annamme sille nimeksi ”Sijaintimme” ja lisäämme lyhyen kuvauksen. Voit käyttää valikkoa muuttaaksesi neulan tyyliä, kuten meillä on, tähdeksi tai väriksi, jota emme muuttaneet. Voit myös lisätä kuvia tai videoita sijaintiisi.

Seuraavaksi piirretään joitain viivoja paikalliselta linja-autopysäkiltä ja rautatieasemalta, vain näyttääksemme kuinka sinne pääsee lähimmiltä joukkoliikenteen pysäkeiltä käyttämällä mustaa junaa ja punaista bussipysäkkiä.

Lopuksi meidän on upotettava se verkkosivustoomme. Sitä varten meidän on ensin julkistettava karttamme. Siirryttäessä jakamisvalikkoon pääkomentopaneelista, asetamme pääsynhallinnan Rajoitettu kohtaan Kaikki, joilla on linkki. Tämä tekee kartasta julkisen.

Seuraavaksi sinun on käytettävä upotuskoodia päämuokkauspaneelista. Klikkaa kolme pistettä valitse karttasi nimen vierestä Upota verkkosivustolleni, ja kopioi saamasi HTML-koodi.

Jos haluat upottaa sen verkkosivustollesi, jos käytät Gutenbergiä, siirry sivulle, jolle haluat lisätä kartan (tai luo uusi), napsauta vain + merkki lisätäksesi lohkon ja valitse sitten Muokattu HTML lohko ja liitä koodi lohkon kenttään.

Jos työskentelet Elementor, sinun täytyy vetää Muokattu HTML widget ja liitä sitten koodi kenttään. Jos käytät WPBakery Page Builder, sinun on käytettävä Raaka HTML elementti ja anna sille liittämäsi koodi. Varten Klassikko editori, varmista vain, että editori on asetettu Teksti -välilehti ja liitä koodi haluamaasi paikkaan.

Ja karttasi on valmis, juuri sellaisena kuin olet määrittänyt sen.

Interaktiivisen kartan lisääminen WordPressiin laajennuksen avulla

Voit myös käyttää lisäosaa interaktiivisen kartan luomiseen. Tällä tai vastaavalla toiminnallisuudella on paljon WordPress-laajennuksia, joista monet olemme käsitelleet parhaita Google Maps -laajennuksia käsittelevässä artikkelissamme. Tätä demonstraatiota varten aiomme käyttää WP Google Maps, mutta voit valita minkä tahansa haluamasi. Kun olet asentanut ja aktivoinut laajennuksen, etsi laajennuksen asetukset luettelosta Asennetut laajennukset ja löytää Karttaeditori luodaksesi kartan.

Kun olet siellä, löydät laajennuksen salliman yhden muokattavan kartan. Sinun tulee tehdä Muokata se.

Voit muuttaa Kartan nimi, kuten olemme, sinne, missä olemme. Siirrämme myös Zoomaustaso ohjaa hieman oikealle, lähentämällä, jotta karttamme olisi hyödyllinen ihmisille, jotka etsivät reittiohjeita. Emme käytä muita vaihtoehtoja tämän esittelyn tarkoituksiin, mutta kiinnitämme huomiosi tähän Leveys ohjata. Jos haluat, että karttasi on herkkä, jätä se paikkaan 100 %.

Seuraavaksi vieritämme alas Omat merkit -osioon ja poistamme oletusmerkin. Voit tehdä sen valitsemalla sen valikosta ja napsauttamalla roskakorikuvaketta. Sitten asetamme oman merkin, joka on keskitetty Bridge Streetille Saint Matthewsissa, Etelä-Carolinassa etsimällä sijainti ja napsauttamalla karttaa hiiren kakkospainikkeella. Lopulta teemme Tallentaa molemmat meidän Merkki ja meidän Kartta, tässä järjestyksessä.

Vieritä takaisin ylös kohtaan Luo karttasi -osiossa uudelleen, löydät karttasi lyhytkoodin kohdasta Yleiset asetukset -välilehti. Napsauta kopioidaksesi se leikepöydällesi ja käyttääksesi sitä viestissä.

Kun lyhytkoodisi on valmis liitettäväksi, avaa viesti tai sivu, johon haluat upottaa karttasi. Näytämme sinulle, kuinka se tehdään postauksessa Gutenbergin avulla. Napsauta ensin + kirjaudu lisätäksesi lyhytkoodilohkon ja liitä sitten karttasi lyhytkoodi lohkon kenttään.

Ja karttasi näkyy viestissäsi määritettynä.

Huomaa, että WP Google Maps -laajennuksella on monia vaihtoehtoja, joita olemme tuskin käsitelleet tässä esittelyssä. Suosittelemme tutustumaan niihin, jotta voit mukauttaa karttaasi täysin tarpeidesi mukaan. Sama, ja vielä enemmän, pätee Pro-versioon.

Tiivistettynä

Jos haluat kertoa vierailijoille, missä olet fyysisessä maailmassa, voit tehdä sen helposti lisäämällä interaktiivisen kartan verkkosivustollesi jommallakummalla esittelemistämme menetelmistä. Interaktiivisen kartan avulla he voivat vierittää ympäriinsä ja zoomata löytääkseen parhaan reitin tavoittaakseen sinut, mutta muutamalla napsautuksella voit tehdä siitä entistä helpompaa osoittamalla heidät oikeaan suuntaan. Jos sinulla on jokin kivijalkainen sijainti, miksi et tekisi vierailijoille sen löytämisestä erittäin helppoa?