Kartat ovat olennainen osa kaikkia yrityssivustoja. Vaikka oletkin täysin Internet-pohjainen, asiakkaat haluavat silti tietää, kuka olet ja missä asut. Google Maps on nyt oletus monille verkkosivustoille, koska se on helpoin käyttää, näennäisesti tarkin ja on ilmainen. Tämän oppaan loppuun mennessä tiedät tarkalleen kuinka upottaa reagoiva Google Map verkkosivustoosi.
Oletus Google Maps ei ole aina reagoiva, joten se ei välttämättä sovi eri näytön kokoihin. Sen mukaan, käytätkö WordPress-laajennusta vai upotatko sitä itse koodilla, on ehkä lisättävä muutama rivi CSS: ää, jotta kartta reagoisi.
Vastuullinen web-suunnittelu
Responsiivinen on keskeinen termi tässä. Se kuvaa verkkosuunnittelua, joka ottaa huomioon käyttökokemuksen ja laitteen varmistaakseen, että se on sama riippumatta siitä, mitä laitetta käytät verkkosivustoon pääsyyn. Esimerkiksi reagoivan verkkosivuston tulisi tarjota samanlaatuinen kokemus riippumatta siitä, vierailetko sivustolla työpöydällä, tablet-laitteella tai älypuhelimella.
Tätä varten verkkosivuston on mukauduttava erilaisiin tarkkuuksiin, näytön kokoihin ja kosketusnäyttöön.
Upota reagoiva Google Map verkkosivustoon
Tiedän kolme tapaa upottaa Google Maps verkkosivustoon. Jos käytät WordPress-teemaa, siinä voi olla ominaisuus sisäänrakennettu. Voit myös käyttää laajennusta tai upottaa koodin suoraan Googlelta mihin tahansa verkkosivustoon. Ensimmäinen ja toinen vaihtoehto ovat hyviä WordPress-käyttäjille, myös muut CMS käyttävät laajennuksia, joten olet suojattu siellä. Viimeisen vaihtoehdon, koodin käytön, tulisi toimia useimmissa verkkosivustoissa riippumatta siitä, kuinka ne on rakennettu.
Upota reagoiva Google Map WordPress-teeman avulla
Joillakin WordPress-teemoilla on ominaisuus, joka on tarkoitettu erityisesti Google Mapsille. Koska kartat ovat niin tärkeitä nykyaikaisille verkkosivustoille, jotkut teemasuunnittelijat ovat ottaneet ne suoraan suunnitteluunsa. Jos teemallasi on karttaominaisuus, tarvitset todennäköisesti Google Maps -sovellusliittymän saadaksesi sen toimimaan. Lisäät sovellusliittymän teemavaihtoehtoihin, ja se puhuu suoraan Googlelle rakentaaksesi kartan jokaisella vierailulla.
- Käy tällä Google-verkkosivun sivulla aloittaaksesi sovellusliittymäprosessin.
- Valitse sininen Aloita-painike.
- Valitse kolmen rivin valikkokuvake uuden näytön vasemmasta yläkulmasta.
- Valitse sovellusliittymät ja palvelut ja sitten käyttöoikeustiedot.
- Valitse Luo käyttöoikeustiedot ja sitten API-avain.
- Valitse Rajoita avainta ja valitse HTTP-viittaajat.
- Valitse Tallenna.
- Kopioi API-avain ja liitä se sitä vaativaan suunnitteluvaihtoehtojen sivulle.
Kun sinulla on API-avain, voit ottaa Google Mapin käyttöön verkkosivustollasi teemansuunnittelutyökalujen avulla. Niin kauan kuin teema on herkkä, kartan tulisi olla myös.
Upota reagoiva Google Map pluginin avulla
WordPress käyttää laajennuksia, Joomla käyttää laajennuksia, Drupal käyttää moduuleja tai laajennuksia ja muut CMS käyttävät samanlaisia nimeämiskäytäntöjä. Joka tapauksessa plugins viittaa modulaarisiin elementteihin, jotka voit kiinnittää CMS: n ydintoimintoihin ominaisuuksien lisäämiseksi. Yksi hyödyllinen ominaisuus on Google Map. Jos verkkosivustosi teemassa ei ole karttaelementtiä etkä halua tehdä koodia itse, plugin on seuraavaksi paras asia.
- Siirry WordPressissä kohtaan Laajennukset ja Lisää uusi.
- Etsi Google Mapsista ja valitse laajennus, josta näytät.
- Ota se käyttöön Plugins-ohjelmassa ja siirry sen asetuksiin.
- Lisää yllä luomaasi Google Maps -sovellusliittymä, kun osoitat, ja Tallenna.
- Asenna laajennus missä haluat kartan näkyvän.
Muut CMS eroavat hiukan nimensä ja valikon sijaintinsa välillä, mutta periaate on suurin piirtein sama. Useimmat, elleivät kaikki, karttalaajennukset vaativat Google Maps -sovellusliittymän toimivuuden.
Upota reagoiva Google Map koodilla
Jos et käytä WordPressiä tai muuta CMS: ää, voit silti upottaa reagoivan Google Mapsin. Sinun on käytettävä koodia moduulin sijasta. Se vie hiukan enemmän työtä, mutta toimittaa samat reagoivat kartat.
- Käy Google Mapsissa ja siirry, kunnes näytettävä kartta täyttää näytön.
- Valitse sininen Jaa-linkki ja kopioi koodi Embed Map -sovelluksesta.
- Lisää tarkka upotuskoodisi alla olevaan koodiin välille ja.
- Lisää koodi verkkosivustosi HTML-koodiin, jossa haluat nähdä kartan.
- Tallenna muutokset.
Koodi:
Tämä ei ole koodini, löysin sen verkosta, mutta testasin sen verkkosivustollani. Se toimii kuin viehätys ja sen pitäisi toimia, jos käytät CMS, HTML, Hugo tai yhtä monista muista verkkosivustojen kielistä tai sivutyökaluista.
