Zemljevidi so bistven vidik vsakega poslovnega spletnega mesta. Tudi če ste popolnoma na internetu, stranke še vedno radi vedo, kdo ste in kje živite. Google Maps je zdaj privzeto za številna spletna mesta, saj je najenostavnejši, na videz najbolj natančen in brezplačen. Do konca te vadbe boste natančno vedeli, kako v svoje spletno mesto vgraditi odziven Google Map.
Privzeti Google Zemljevidi niso vedno odzivni, zato morda ne spreminjajo velikosti zaslona. Glede na to, ali uporabljate vtičnik za WordPress ali ga sami vdelate s kodo, boste morda morali dodati nekaj vrstic CSS, da bo zemljevid odziven.
Odziven spletni dizajn
Tu je odziven ključni izraz. Opisuje spletni dizajn, ki upošteva uporabniško izkušnjo in napravo, da se zagotovi, da je enaka, ne glede na to, katero napravo uporabljate za dostop do spletnega mesta. Na primer, odzivno spletno mesto mora zagotavljati enako kakovost izkušnje, ne glede na to, ali ga obiščete na namizju, tabličnem računalniku ali pametnem telefonu.
Če želite to narediti, se mora spletno mesto prilagoditi različnim ločljivostim, velikosti zaslona in dotikom.
Vgradnja odzivnega Google Zemljevida na spletno mesto
Za vdelavo Google Zemljevidov na spletno mesto vem na tri načine. Če uporabljate temo WordPress, ima morda vgrajena funkcija. Uporabite lahko tudi vtičnik ali kodo vdelate neposredno iz Googla na katero koli spletno mesto. Prva in druga možnost sta odlični za WordPress uporabnike, drugi CMS uporabljajo tudi vtičnike, tako da ste tam pokriti. Končna možnost uporabe kode naj deluje na večini spletnih strani, ne glede na to, kako so zgrajena.
Uporabite temo WordPress, da vstavite odziven Google Map
Nekatere teme WordPressa bodo imele funkcijo posebej za Google Zemljevide. Ker so zemljevidi tako bistveni za sodobna spletna mesta, so jih nekateri oblikovalci tematik vključili neposredno v svoje zasnove. Če ima vaša tema zemljevid, boste verjetno potrebovali API za Google Zemljevide, če želite delovati. V možnosti teme dodate API in ta bo z Googlom neposredno govoril o sestavljanju zemljevida ob vsakem obisku.
- Za začetek postopka API obiščite to stran na Googlovem spletnem mestu.
- Izberite modri gumb Get Started.
- V zgornjem levem kotu novega zaslona izberite ikono menija v treh vrsticah.
- Izberite API-je in storitve in nato poverilnice.
- Izberite Ustvari poverilnice in nato API Key.
- Izberite Omeji ključ in izberite HTTP Referrers.
- Izberite Shrani.
- Kopirajte ključ API in ga prilepite na stran z možnostmi oblikovanja, ki jo potrebuje.
Ko imate ključ API, lahko Google Zemljevid implementirate na svoje spletno mesto s pomočjo orodij za oblikovanje tem. Dokler je tema odzivna, bi moral biti tudi zemljevid.
S pomočjo vtičnika vstavite odziven Google Map
WordPress uporablja vtičnike, Joomla uporablja razširitve, Drupal uporablja module ali vtičnike in drugi CMS uporabljajo podobne konvencije o poimenovanju. Kakor koli že, vtičniki se nanašajo na modularne elemente, ki jih lahko priklopite na svoj glavni CMS in dodate funkcije. Ena koristna funkcija je Google Map. Če tema vašega spletnega mesta ne vsebuje elementa zemljevidov in kode ne želite narediti sami, je naslednja najboljša stvar vtičnik.
- V WordPressu pojdite na Vtičniki in Dodaj novo.
- Poiščite Google Zemljevide in izberite vtičnik, ki vam je všeč.
- Omogočite ga v vtičnikih in pojdite na njegove nastavitve.
- Dodajte API Google Maps, ki ste ga ustvarili zgoraj, kjer je navedeno, in Shrani.
- Vtičnik vstavite, kjer koli se želite prikazati.
Drugi CMS se nekoliko razlikujejo glede poimenovanja in menijev, vendar je načelo skoraj enako. Večina, če ne vsi, vtičniki za zemljevide bodo morali delovati API-je Google Maps.
Uporabite kodo, da vstavite odziven Google Zemljevid
Če ne uporabljate WordPressa ali drugega CMS-a, lahko še vedno vgradite odziven Google Map. Uporabiti morate samo kodo namesto modula. Potrebno je malo več dela, vendar bodo ustvarili enake odzivne karte.
- Obiščite Google Zemljevide in se pomičite, dokler zemljevid, ki ga želite prikazati, ne napolni zaslona.
- Izberite modro povezavo Share in kopirajte kodo z Vdelaj zemljevid.
- Spodaj dodajte svojo specifično kodo za vdelavo med in.
- Dodajte kodo v HTML svoje spletne strani, kjer želite videti zemljevid.
- Shranite spremembe.
Koda:
To ni moja koda, našel sem jo na spletu, vendar sem jo preizkusil na svojem spletnem mestu. Deluje kot čar in mora delovati, ne glede na to, ali uporabljate CMS, HTML, Hugo ali katerega od mnogih drugih jezikov spletnega mesta ali strani.
