Karte su važan aspekt bilo kojeg poslovnog web mjesta. Čak i ako ste potpuno utemeljeni na internetu, kupci i dalje vole znati tko ste i gdje živite. Google Maps sada je zadana postavka za mnoge web stranice jer je najlakši za upotrebu, naizgled najprecizniji i besplatan. Na kraju ovog vodiča točno ćete znati kako ugraditi responzivnu Google kartu u svoje web mjesto.
Zadane Google karte ne reagiraju uvijek tako da se one ne mogu skalirati na različite veličine zaslona. Ovisno o tome upotrebljavate li WordPress dodatak ili ga sami ugrađujete pomoću koda, možda ćete trebati dodati nekoliko redaka CSS-a kako bi karta odgovarala.
Odgovarajući web dizajn
Ovdje je responzivni ključni pojam. Opisuje web dizajn koji uzima u obzir korisničko iskustvo i uređaj kako bi se osiguralo da je isti bez obzira na to koji uređaj koristite za pristup web mjestu. Na primjer, responzivna web stranica treba pružiti jednaku kvalitetu iskustva bilo da je posjetite na radnoj površini, tabletu ili pametnom telefonu.
Da bi se to postiglo, web stranica se mora prilagoditi različitim rezolucijama, veličinama zaslona i dodiru.
Ugrađivanje odgovarajuće Google mape u web mjesto
Tri su mi načina za ugrađivanje Google karata na web mjesto. Ako koristite WordPress temu, ona može imati ugrađenu značajku. Također možete koristiti dodatak ili možete ugraditi kôd izravno s Googlea na bilo koju web stranicu. Prva i druga opcija sjajne su za WordPress korisnike, a drugi CMS koriste dodatke, tako da ste tamo prekriveni. Posljednja mogućnost korištenja koda trebala bi raditi na većini web stranica bez obzira na to kako su izgrađene.
Koristite WordPress temu za ugradnju odgovarajuće Google karte
Neke teme programa WordPress imat će značajku posebno za Google karte. Budući da su karte tako važne za suvremene web stranice, neki su ih dizajneri uvrstili izravno u svoj dizajn. Ako vaša tema ima značajku karte, vjerojatno će vam trebati API za Google karte da bi funkcionirao. API dodajete u opcije tema i on će izravno razgovarati s Googleom kako bi napravio kartu pri svakom posjetu.
- Posjetite ovu stranicu na Google web mjestu kako biste započeli postupak API-ja.
- Odaberite plavi gumb Početak rada.
- Odaberite ikonu izbornika s tri retka u gornjem lijevom kutu novog zaslona.
- Odaberite API-je i usluge, a zatim vjerodajnice.
- Odaberite Stvori vjerodajnice, a zatim API ključ.
- Odaberite Ograniči ključ i odaberite HTTP preporuke.
- Odaberite Spremi.
- Kopirajte API ključ i zalijepite ga na stranicu s mogućnostima dizajna koja ga zahtijeva.
Jednom kada imate ključ API-ja, možete implementirati Google kartu na svoju web stranicu pomoću alata za oblikovanje tema. Sve dok tema odgovara, i karta bi trebala biti previše.
Upotrijebite dodatak za umetanje osjetljive Google karte
WordPress koristi dodatke, Joomla koristi proširenja, Drupal koristi module ili dodatke, a drugi CMS koriste slične konvencije o imenovanju. Bilo kako bilo, dodaci se odnose na modularne elemente koje možete dodati na vaš glavni CMS kako biste dodali značajke. Jedna korisna značajka je Google karta. Ako tema vaše web stranice ne sadrži element karte i ne želite sami raditi kôd, sljedeći je najbolji dodatak.
- U WordPressu idite na Dodaci i dodajte novo.
- Potražite Google karte i odaberite dodatak koji vam se sviđa.
- Omogućite ga u okviru dodataka i idite na njegove postavke.
- Dodajte API Google Karte koji ste stvorili iznad gdje je naznačeno i Spremi.
- Provedite dodatak gdje god želite da se karta prikazuje.
Drugi se CMS neznatno razlikuju u nazivima i pozicijama izbornika, ali princip je gotovo isti. Za većinu, ako ne i sve, dodatke za karte zahtijevat će funkcioniranje API-ja Google Maps.
Upotrijebite kôd za umetanje odgovarajuće Google karte
Ako ne upotrebljavate WordPress ili neki drugi CMS, još uvijek možete ugrađivati responzivni Google Map. Morate koristiti kôd umjesto modula. Potrebno je malo više posla, ali dostavit će iste odgovarajuće karte.
- Posjetite Google karte i kretajte se dok karta koju želite prikazati ne ispuni zaslon.
- Odaberite plavu vezu Share i kopirajte kôd s Embed Map.
- Dodajte svoj specifični kôd za ugradnju u donji kôd između i.
- Dodajte kôd u HTML svoje web stranice na kojoj želite vidjeti kartu.
- Spremite svoje promjene.
Kod:
To nije moj kod, našao sam ga na mreži, ali testirao sam ga na svojoj web stranici. Djeluje poput šarma i trebalo bi funkcionirati bilo da koristite CMS, HTML, Hugo ili neki od mnogih drugih jezika web stranica ili alata za stranice.
