Kartta ohjaa asiakkaasi perille

Kartta ohjaa perille

Kartta on hyvä alku mutta älä tyydy siihen

Google Mapsin kartta on helppo upottaa melkein mihin tahansa sivustolle mutta upottamisessa voi tehdä monta asiaa joko hyvin tai ei niin hyvin.

Seuraavien vinkkien avulla varmistat, ettei kartta haittaa sivuston käytettävyyttä ja että asiakkaasi pystyy käynnistämään tarvittaessa myös navigaattorin. Näin varmistat, että asiakas pääsee varmasti perille.

Vinkki 1: Tee kartan yhteyteen ajo-opastuksen käynnistävä linkki

Pelkkä Google Maps -kartta on hieman vajavainen ratkaisu ja pakottaa käyttäjän joko itse "zoomailemaan" karttaa tai siirtymään navigaattoriohjelmaan.

Voit kuitenkin tehdä asiakkaallesi palveluksen ja lisätä kartan yhteyteen selkeän ja riittävän kokoisen linkin, jota painamalla ajo-opastus.

Kirjoita siis haluamasi teksti, esim. "Käynnistä ajo-ohjeet" ja tee siitä seuraavankaltainen linkki (korvaa omalla osoitteellasi):

https://maps.google.com/?daddr=Pietari Kylliäisentie+46,+57710+Savonlinna

 

Eli vaikka näin:

Vinkki 2: Varmista, ettei kartta peitä puhelimella katsottaessa koko näyttöä

Google Mapsin kartan voi upottaa mille tahansa sivustolle ns. iframe-menetelmällä. WordPressiin on olemassa myös monia lisäosia, joilla karttaa pystyy "tuunaamaan" esimerkiksi omilla merkeillä jne.

Upotettavan koodin saa etsimällä halutun osoitteen Google Mapsista, avaamalla valikon vasemmasta ylälaidasta (kolme viivaa) ja valitsemalla Jaa tai upota kartta.

Varsinainen upotuskoodi löytyy Upota kartta -välilehdeltä.

Jos haluat muuttaa kartan kokoa,

  • voit muuttaa leveysarvoa kohdassa width="600"
  • korkeutta kohdassa height="450"
  • kartan reunaviivan leveyttä kohdassa frameborder="0"

Leveyden voi määritellä myös prosenteissa eli esim. width="100%"

Vinkki 3: Varmista, ettei kartta liiku, kun käyttäjä yrittää päästä sivulla kartan ohi

Tämä aiheuttaa monesti käyttäjille ärsytystä ja harmaita hiuksia, joten muista varmistaa tämäkin asia.

Google Mapsin "virallinen" upotuskoodi on onneksi päivitetty niin, että ainakin omassa Android-puhelimessani siihen tulee oletuksena teksti "Siirrä karttaa kahdella sormella".

Jos kuitenkin puhelimella tai tabletilla testatessa liikkuu kartta eikä sivu, voit lisätä upotuskoodiin iframe- sanan jälkeen ja src-kohtaa ennen style="pointer-events:none".

Tämä estää myös tilanteen, jossa kartta lähenee tai loittonee pöytäkoneella hiiren rullaa käytettäessä.

 

Tarkempia ohjeita löydät tarvittaessa esimerkiksi näiltä sivuilta:

https://trulycode.com/bytes/disable-google-maps-drag-zoom-mobile-iphone/

https://coderwall.com/p/pgm8xa/disable-google-maps-scrolling-on-mobile-layout

Kommentit