Vrlo često, prilikom izrade stranice, postaje potrebno na nju umetnuti kartu koja bi označavala lokaciju vaše organizacije. Zapravo, karta na web mjestu je vrlo zgodna: prije svega, za vaše korisnike. Moći će odmah, bez napuštanja vašeg resursa, vidjeti kako vas mogu pronaći, što je u blizini i odrediti koliko se vaša organizacija nalazi od njihove lokacije. Ne znaju svi kako umetnuti kartu na web mjesto. I to je vrlo, vrlo jednostavno za napraviti!
U ovom članku ću vam reći i pokazati kako u samo nekoliko minuta možete umetnuti kartu sa željenom lokacijom na stranice svoje stranice.
Kako ugraditi kartu na web stranicu
Dakle, za umetanje karte na stranicu, koristit ćemo uslugu od Googlea.
1. Prvo što trebamo učiniti je otići na web stranicu Google Maps.
2. Sada, kako bismo izvršili sve operacije koje su nam potrebne, najbolje nam je otići na "Klasično sučelje".
Da biste to učinili, kliknite na ikonu upitnika u donjem desnom kutu zaslona.
Pred vama će se otvoriti mala ploča izbornika na izvlačenje u kojoj trebate odabrati "Klasično sučelje".
Nakon toga će se pojaviti još jedan skočni prozor u kojem će se od vas tražiti da kažete zašto želite koristiti klasično sučelje. Možete označiti jednu od stavki, ili je ne možete označiti, ali odmah kliknite na plavu poveznicu "Klasično sučelje" ispod.
Nakon toga ćete prijeći na klasično Google maps sučelje, gdje se nalazi sve što nam je potrebno za postavljanje karte na stranicu stranice.
3. Sada u polje za unos adrese unesite željenu adresu. Ne zaboravite da trebate navesti državu, grad, ulicu i kuću, odnosno punu adresu.
Kao rezultat, dobit ćete svoju lokaciju na karti označenoj crvenom oznakom.
4. Sada moramo dobiti kod za ugradnju u našu web stranicu i također postaviti neke postavke.
Da bismo dobili kod za ugradnju, moramo kliknuti na ikonu da bismo dobili poveznicu ili kod (nalazi se desno od ikone pisača).
5. Ovdje nas zanima HTML kod za dodavanje na web stranicu (drugo polje).
Također u ovom kodu možete vidjeti neke parametre koji se mogu mijenjati. Ovo su dimenzije karte, odnosno njena visina i širina. Također možete postaviti okvir za kartu. Prema zadanim postavkama, vrijednost okvira je nula, ali to možete promijeniti postavljanjem, na primjer, jedan.
Ako trebate, promijenite ove parametre, iako to možete učiniti iz koda web stranice. Ako nije potrebno, samo kopirajte cijeli kod.
6. Sada ostaje samo zalijepiti kopirani kod na mjesto svoje web stranice gdje želite vidjeti kartu.
Možete stvoriti zaseban blok "div" posebno za svoju kartu, koju zatim možete stilizirati putem datoteke stilova.
Zalijepit ću svoju karticu ovdje. Pogledajte kako će to izgledati.
Kao rezultat toga, korisnik će vidjeti vašu lokaciju označenu oznakom. Moći će pomicati kartu, zumirati i smanjivati.
Također, iznad markera će se prikazati okvir s vašom adresom. Ispod je poveznica za pregled karte u većem mjerilu.
Dakle, sve je vrlo jednostavno, funkcionalno i praktično.
Koristite na zdravlje!
Bit će mi drago ako vam ova lekcija bude korisna. Kao zahvalu, ostavite svoje komentare i podijelite članak pomoću gumba društvenih mreža u nastavku.
Također se pretplatite na ažuriranja bloga ako već niste pretplaćeni. Obećavam vam puno korisnih materijala.
S vama je bila Anna Kotelnikova.
Sretno i vidimo se opet.
Danas izvanmrežno poslovanje ne zanima znak, već blokovi s podacima o osnivanju na desnoj strani rezultata pretraživanja Googlea i Yandexa. Razgovarajmo o tome kako dodati podatke tvrtke na karte.
Kako dodati tvrtku na Google karte
Morate stvoriti stranicu u servisu Google My Business.
Što to daje? Prije svega, mogućnosti:
- informirati korisnike o cijenama, radnom vremenu, događanjima i novostima organizacije;
- pratiti recenzije i brzo odgovoriti na njih;
- analizirati prikaze poslovnih informacija (broj pregleda podataka tvrtke, pregleda fotografija, videa);
- priložiti karte s rutom do organizacije;
- izgraditi ugled kroz ocjene korisnika.
Blokirajte Google My Business u rezultatima pretraživanja
Algoritam za dodavanje tvrtke.
Ako ne dobijete pismo u roku od 3-4 tjedna, slobodno napišite tehničkoj podršci: “Pismo nije došlo, što da radim?”. Google će od vas tražiti da prođete kroz postupak ručne provjere.
Da biste to učinili, morat ćete poslati nekoliko fotografija:
9. Nakon toga bit ćete prebačeni na osobni račun vaše tvrtke:
Na stranici "Informacije" morate dati najpotpunije podatke o svojoj tvrtki:
- dodajte dodatne kategorije koje odgovaraju vašoj aktivnosti;
- dodajte opis svoje tvrtke;
- navesti radno vrijeme;
- načini plaćanja roba i usluga;
- dodati fotografije i video zapise;
- kao i dodatne informacije.
U opisu tvrtke pokušajte što točnije napisati što je točno vaše poslovanje: koje proizvode ili usluge nudite.
Što su potpunije i bolje informacije o vašoj tvrtki predstavljene, veća je vjerojatnost da će ih Google korisnici vidjeti.
Ako gradite web stranicu za tvrtku ili uslugu, ne možete izbjeći dodavanje karte na web mjesto s lokacijom te tvrtke ili usluge.
Postoje najmanje tri pružatelja usluga koji pružaju ovu mogućnost: Yandex, Google i 2GIS.
Ovdje ćemo pogledati dodavanje Yandex karte i to je možda najlakši, najbrži i osim toga potpuno besplatan način. Treba napomenuti da ova usluga radi preko API-ja i zahtijeva da korisnik stranice ima omogućen javascript.
Istodobno, ova je uputa prikladna ne samo za WordPress, već i za bilo koje web-mjesto (barem za "goli" html), budući da je kod za ugradnju univerzalan.
Dodavanje Yandex karte na stranicu
1. Najprije morate izraditi kartu. Da biste to učinili, slijedite vezu na stranicu konstruktora - https://tech.yandex.ru/maps/tools/constructor/ . Da biste radili u konstruktoru, morate imati račun u Yandexu. Yandex račun je isti za sve usluge: mail, webmaster, novac itd. Ako ga još nemate, morate se registrirati.
2. U traci za pretraživanje (na slici označeno crvenom bojom) naznačimo adresu koja vam je potrebna (regija, grad, ulica, kuća). Dobivamo kartu s oznakom i koordinatama adrese koja vam je potrebna.
3. Ako je potrebno, možete napraviti dodatne postavke: promijeniti boju i mjesto markera, skalu, vrstu prikaza (karta, satelit, hibrid) itd.
4. Zatim navedite naziv i kliknite gumb "Spremi i dohvati kod" pri dnu zaslona.
5. Nakon toga pojavit će se kod koji trebate zalijepiti na svoju stranicu na mjesto gdje bi se karta trebala prikazati.
Ako dodajete kod na stranicu u administratorskoj ploči WordPressa, tada prvo prebacite način uređivanja stranice na "Tekst".
Nakon dodavanja koda, karta koju ste napravili počet će se automatski odražavati na web mjestu.
Veličina zaslona određena je parametrima širine i visine. Ako je potrebno, možete promijeniti ove vrijednosti u rezultirajućem kodu. Da biste proširili Yandex kartu na punu širinu zaslona, navedite vrijednost width=-1.
U ovom članku ćemo razmotriti instaliranje Yandex karata bez upotrebe dodatka, pa je prikladan i za običnu stranicu i za stranicu kreiranu na WordPress motoru. Pročitajte o tome kako dodati Google karte.
Yandex karte (Yandex karte) je izvrstan alat koji će vam omogućiti da prijavite lokaciju ureda, skladišta ili trgovine. Postavljanjem sanjki na web stranicu Yandexa, s detaljnom kartom lokacije, možete biti sigurni da se klijent neće izgubiti.
Ako ste vlasnik internetske trgovine, obrazac za narudžbu možete opremiti zemljovidom koji vam omogućuje da naznačite svoju lokaciju klijentu, što će značajno uštedjeti vrijeme čekanja. I kurir će biti zahvalan.
Yandex karte imaju karte metroa i podatke o prometu, što će izbjeći brojne neugodnosti i uštedjeti vrijeme.
Ako usporedimo Yandex i Google karte (dodavanje Google karata na stranicu), onda će moja prednost imati uslugu Yandex maps, jer nudi više mogućnosti za korisnika. Da ne spominjemo činjenicu da najbolje detalja imaju Yandex karte, kao i folk kartu, koju sami korisnici uređuju sa satelitskih snimaka.
Možda ćemo završiti s uvodom, kako kažu: "Bolje je jednom vidjeti ...".
Instaliranje (dodavanje) Yandex karata na vašu stranicu
Prije kao instalirajte Yandex kartu na svoju web stranicu, potrebno ga je stvoriti. To možete učiniti u konstruktoru karte:
Promjena veličine karte povlačenjem oznaka. To će vam omogućiti da vizualno odredite kako će izgledati karta instalirana na web mjestu. Kako bi pomogli dizajnerima izgleda, ispod karte se prikazuju visina i širina u pikselima.
Kopiranje koda:
Ovaj kod karte lako je umetnuti u WordPress widget proizvoljnog teksta ili html koda:
Istaknute točke su visina i širina, tako da se mogu mijenjati bez ponovnog vraćanja na stranicu dizajnera karte.
Također možete zalijepiti kod karte u WordPress post ili stranicu. Jedina stvar je da ga trebate umetnuti u html editor, a ne u vizualni.
Rezultat rada:
Za kreiranje je prethodno korišten api-ključ. Trenutno njegova upotreba nije potrebna. Međutim, trebali biste pročitati neke preporuke Yandexa:
Yandex maps API za razvojne programere ima širok raspon funkcija koje se mogu ugraditi na vaše web-mjesto i značajno poboljšati funkcionalnost karata:
Također je moguće odrediti lokaciju korisnika i još mnogo toga.
Primjeri koda ovih i drugih karata mogu se pronaći u Yandex API sandboxu:
Jedan od primjera (usmjeravanje i cijena) ugrađenih na vašu web-lokaciju. Odaberite 2 točke na karti, zatim kliknite na početnu točku, u skočnom prozoru će se prikazati informacije o cijeni dostave.
(dobra stvar), danas ćemo opet govoriti o usluzi od Yandexa i opet o kartama, ali ne o plastičnim ili igraćim kartama, već o kartama područja. Razmotrimo dizajner karte iz Yandexa s kojim možete napraviti, na primjer, kartu uputa do vašeg ureda i objesiti je na web mjesto. Članak sadrži detaljne upute za postavljanje usluge Yandex Maps za stranicu za kontakt na osobnoj web stranici.
Mogućnost pomoći kupcima da dođu na pravo mjesto značajan je doprinos razvoju poslovanja, što više ljudi stigne tamo gdje treba, to će biti veći prihod i dobit. Dakle, ako je vaš posao nekako vezan za objekte na terenu, onda je umetanje dobre karte na web mjesto neophodno.
Zašto vam je potrebna interaktivna karta
- Pogodno za klijenta - lako je planirati rutu uzimajući u obzir sve trenutne promjene, budući da Yandex odmah unosi podatke o popravcima i novim zgradama na svoje karte.
- Prikladno je za vlasnika web-mjesta - sve se prilagodbe na karti izvode automatski, dovoljno je jednom umetnuti kartu na web-mjesto, a zatim se ažuriranja sama učitavaju iz baze podataka Yandex.
- Podiže kredibilitet i razinu povjerenja u organizaciju. Iako svaki karikaturalno-montažni ured može napraviti takav losion, na podsvjesnoj razini bolje se percipira stranica s interaktivnom kartom.
U stara vremena, adrese ureda, rute prolaza i putovanja, razni zanimljivi objekti itd. označeno na slikama koje prikazuju kartu i učitano na stranicu u običnoj jpg ili png datoteci. Problem je bio u tome što nisu mogli uzeti u obzir privremene popravke, zastoje u prometu ili druge promjene terena, nisu mogli predlagati pojedinačne rute iz različitih smjerova.
S razvojem internetskih usluga, kao što su Yandex Maps i Google Maps, postalo je moguće učiniti karte živim – interaktivnim. Možete ih rotirati u različitim smjerovima, mijenjati skalu, postavljati rute s različitih točaka, planirati svoje kretanje uzimajući u obzir prometne gužve i još mnogo toga.
Prisutnost prikladne karte lokacije na stranici za kontakt u naše vrijeme dobro je pravilo za svaku tvrtku.
A kako bih vam pomogao da svoj web-resurs učinite ugodnijim za ljude, reći ću vam kako dodati Yandex kartu na web-mjesto, to se radi vrlo jednostavno pomoću posebnog konstruktora (ne teže od).
Yandex Map Constructor
Ako nemate račun u Yandexu, morat ćete ga stvoriti, jer bez toga neće raditi ništa, usluga će od vas tražiti da se prijavite ili registrirate. Ne treba se bojati, registracija je stvaranje poštanskog sandučića na Yandexu. Čak i ako vam ne treba za rad s e-poštom, dobro će doći za druge usluge tražilice, na primjer, za Yandex metric ili Yandex Webmaster.
Postupak počinje s ove stranice - tech.yandex.ru/maps/tools/constructor/
Budući da čitate ovaj članak, znači da se prvi put prijavljujete i nemate prethodno spremljene kartice, ostaje da odaberete lijevi žuti gumb “Kreiraj novu karticu”. Od tog trenutka počinje formiranje pojedinačnih postavki karte za željeno područje.
Trik je u tome što možete umetnuti ne samo Yandex kartu s točnom adresom, već kartu s bilo kojim brojem objekata istaknutih različitim oznakama i bojama - objekti, točke, rute.
Sve postavke su napravljene u vizualnom konstruktoru, kodovi se neće morati uređivati, rad prilagodbe malo se razlikuje od uobičajene upotrebe Yandex karata od strane korisnika. Počnimo s dodavanjem objekata.
Dodavanje objekata
Prvi alat je obrazac za pretraživanje koji se nalazi na vrhu karte. Uz njegovu pomoć možemo pronaći željenu točku po adresi, koordinatama ili nazivu. Unesite podatke zahtjeva u polje, primjer s adresom "Moskva, Crveni trg":
Nakon pritiska na tipku Find, na terenu će se pojaviti točka koja odgovara mjestu navedenog objekta. Možete umetnuti mnogo objekata. Primjer Kremlja:
Svaka točka se može konfigurirati tako da se razlikuje od ostalih objekata i lako se razlikuje na karti – mijenjaju se boja i oblik, a unutra možete dodati i jedinstvenu ikonu klikom na padajući izbornik "Sadržaj". To je prikladno ako na kreiranoj karti postoji mnogo objekata i oni se mogu razvrstati u različite skupine.
S lijeve strane se popunjava popis svih adresa označenih na karti.
Promjena razmjera i položaja
Pomoću tipki "+" i "-" koje se nalaze u gornjem lijevom dijelu izgleda postavlja se optimalno mjerilo. Za kretanje središtem Moskve nije potrebna potpuna karta Rusije, a ako određujete točkasti objekt u nekom gradu, bolje je prilagoditi ljestvicu na razini na kojoj se mogu razlikovati nazivi ulica i okolnih kuća.
Za pomicanje karte u različitim smjerovima, trebate je zgrabiti pritiskom lijeve tipke miša i premjestiti gdje želite.
Obrisi objekata (poligoni) i linije
Ako je potrebno istaknuti obrise bilo kojeg elementa na kartama, kada pokazivanje nije dovoljno, upotrijebite alat "Poligoni". Postavljanjem jedne točke za drugom dobivamo obod ispunjen iznutra određenom bojom.
Točaka može biti koliko god želite, stoga slika obojana na karti dopušta bilo koji stupanj složenosti. Konstrukciju konture možete dovršiti klikom na zadnju zadanu točku ili prebacivanjem na bilo koji drugi gumb konstruktora (na primjer, na liniji). Istaknuo sam obrise moskovskog Kremlja duž njegovog zida:
Linije se crtaju pomoću gumba "Linije". Sve radnje su slične prethodnom alatu, samo prostor između točaka nije preslikan. Uz pomoć linija na karti Yandexa možete nacrtati rute kretanja (prolaz, prolaz).
Na taj način možete pokazati najbolju rutu za razgledavanje.
Krajnju točku potvrđujemo ponovnim klikom miša, pojavit će se izbornik "Izbriši" / "Završi". Nakon odabira kraja otvara se polje za natpis krajnje točke i postavljanje parametara linije (debljina, boja, prozirnost).
Dovršavamo rutu klikom na "Gotovo".
Prikaz karte i prekrivanje prometa
Posljednji dodir koji vam omogućuje da karti date posebna svojstva je nametanje prometnih gužvi, za što postoji zaseban gumb. Da budem iskren, sumnjam da će takva opcija biti često tražena za karte umetnute na stranicu, jer ljudi češće koriste navigatore nego ugrađene karte za vožnju automobila.
Ali prebacivanje načina rada između kruga, satelita i hibrida može dobro doći.
Satelitski pogled daje okolnim objektima njihov pravi izgled i lakše ih je prepoznati na takvoj karti nego shematski pravokutnici dijagrama.
Naslov i opis
Kako bismo se u budućnosti vratili na kreiranu kartu kako bismo je ispravili ili ponovno dobili kod za ugradnju, moramo joj smisliti naziv i opis, a zatim je spremiti.
Kôd karte za ugradnju na web mjesto
Naša karta je već spremna i sada trebamo dobiti njen kod za umetanje u web-mjesto, Yandex omogućuje:
- interaktivna karta (o kojoj sam govorio od samog početka);
- statična - obična slika, samo s lukavim kodom, u njoj se ništa ne može premjestiti, osim toga, ograničen je maksimalni broj objekata;
- ispisana - slikovna datoteka visoke kvalitete, nisu podržane sve zemlje, uglavnom CIS i Turska, satelitske i hibridne verzije nisu podržane.
Izbor između njih bit će prikazan odmah nakon spremanja.
U istom izborniku postavlja se konačna veličina u pikselima. Možete ga postaviti ručno ili pomicanjem okvira oko odabranog područja s desne strane za kutove. Potvrdni okvir "Razvući na širinu" čini da karta zauzima cijeli prostor na web mjestu, oslanjajući se na rubove bloka gdje je prikazana.
U ovoj fazi moguće je vratiti se na uređivanje karte, u gornjem lijevom dijelu prozora nalazi se odgovarajući natpis sa strelicom.
Konačni kod se pojavljuje nakon klika na gumb "Preuzmi kod kartice", moj izgleda ovako:
Prilikom odabira ispisane kartice, bit će dodan izbor formata datoteke - png ili jpg, te, sukladno tome, neće biti koda - umjesto toga će se pojaviti gumb za preuzimanje. Takva datoteka se također može umetnuti na stranicu, samo je trebate uploadati na hosting i, ako vaša stranica nema vizualni uređivač, trebat ćete ispisati sliku u HTML tagovima (src)
Kako umetnuti Yandex kartu na web mjesto
Primili smo kod, sada ga moramo prenijeti na naš web resurs. Bilo koje mjesto je pogodno za postavljanje, glavna stvar je da dimenzije odgovaraju. Ako koristite dizajnere ili vizualne uređivače, ne zaboravite ih prebaciti u tekstualni (HTML) način prilikom umetanja koda. Kao ovo:
Karta koju sam napravio
Evo što sam dobio nakon svih postavki:
Ovaj element je prikladan za sve - a potrebni su objekti istaknuti i ljestvica je odabrana prema očekivanjima. Osim toga, Yandex usluga omogućuje korisniku da odredi svoju lokaciju (strelica u gornjem lijevom kutu) i stvori individualnu rutu do željene točke.
Gumb u gornjem desnom kutu u obliku dvije strelice koje se razilaze u različitim smjerovima omogućuje vam otvaranje karte na cijelom zaslonu. Sada o dodacima.
Dodaci za WordPress i druge CMS
Prije je bilo teže izrađivati karte i mnogi su u tu svrhu koristili posebne dodatke, na primjer, za WordPress je bio ovaj - Yandex Maps za WordPress. Sada nisu potrebni API-ji i svaki korisnik s minimalnim znanjem shvatit će kako sve postaviti, tako da ne vidim smisao u dodacima. Gore navedeni dodatak to potvrđuje - nije ažuriran više od 2 godine, očito nema potražnje.
Od relativno relevantnih pronašao sam Yandex Maps API (ažuriran prije 4 mjeseca) i Oi Yandex.Maps za WordPress (prije 5 mjeseci). Ako imate želju igrati dodatke, pronaći ćete ih u WordPress repozitoriju pretraživanjem i kako instalirati dodatke.
Sami ste se uvjerili da je priprema karte i postavljanje na vaš resurs mnogo brže od čitanja ove upute, sada će svaki vaš resurs oduševiti svoje posjetitelje tako prikladnom značajkom.
