Pomerne často sa stáva, že pri vytváraní stránky je potrebné vložiť na ňu mapu, ktorá by označovala polohu vašej organizácie. V skutočnosti je mapa na stránke veľmi pohodlná: v prvom rade pre vašich používateľov. Budú môcť okamžite, bez opustenia vášho zdroja, vidieť, ako vás môžu nájsť, čo je v blízkosti a určiť, ako ďaleko sa vaša organizácia nachádza od ich polohy. Nie každý vie, ako vložiť mapu na stránku. A je to veľmi, veľmi jednoduché!
V tomto článku vám poviem a ukážem, ako môžete za pár minút vložiť mapu s požadovaným umiestnením na stránky svojho webu.
Ako vložiť mapu na webovú stránku
Na vloženie mapy na stránku teda použijeme službu od Google.
1. Prvá vec, ktorú musíme urobiť, je prejsť na webovú stránku Google Maps.
2. Teraz, aby sme mohli vykonať všetky potrebné operácie, je pre nás najlepšie prejsť do „klasického rozhrania“.
Ak to chcete urobiť, kliknite na ikonu otáznika v pravom dolnom rohu obrazovky.
Pred vami sa otvorí malý výsuvný panel s ponukami, v ktorom musíte vybrať „Klasické rozhranie“.
Potom sa zobrazí ďalšie kontextové okno, v ktorom budete požiadaní, aby ste povedali, prečo chcete používať klasické rozhranie. Môžete zaškrtnúť jednu z položiek, alebo ju nemôžete zaškrtnúť, ale ihneď kliknite na modrý odkaz „Klasické rozhranie“ nižšie.
Potom prejdete do klasického rozhrania máp Google, kde je všetko, čo potrebujeme na umiestnenie mapy na stránku webu.
3. Teraz do poľa pre zadanie adresy zadajte požadovanú adresu. Nezabudnite, že musíte uviesť krajinu, mesto, ulicu a dom, teda celú adresu.
V dôsledku toho dostanete svoju polohu na mape označenú červenou značkou.
4. Teraz musíme získať kód na vloženie na našu webovú stránku a tiež nastaviť niektoré nastavenia.
Aby sme získali kód na vloženie, musíme kliknúť na ikonu a získať odkaz alebo kód (nachádza sa napravo od ikony tlačiarne).
5. Tu nás zaujíma HTML kód pre pridanie na webovú stránku (druhé pole).
Aj v tomto kóde môžete vidieť niektoré parametre, ktoré je možné zmeniť. Ide o rozmery mapy, teda jej výšku a šírku. Môžete tiež nastaviť rám pre mapu. V predvolenom nastavení je hodnota rámca nula, ale môžete to zmeniť nastavením napríklad jednotky.
Ak potrebujete, zmeňte tieto parametre, aj keď to môžete urobiť z kódu webovej stránky. Ak to nie je potrebné, stačí skopírovať celý kód.
6. Teraz zostáva len vložiť skopírovaný kód na miesto vašej webovej stránky, kde chcete vidieť mapu.
Môžete vytvoriť samostatný blok „div“ špeciálne pre vašu mapu, ktorý potom môžete upraviť pomocou súboru so štýlom.
Prilepím svoju kartu priamo sem. Pozrite sa, ako to bude vyzerať.
Výsledkom je, že používateľ uvidí vašu polohu označenú značkou. Bude môcť posúvať mapu, približovať a odďaľovať.
Nad značkou sa tiež zobrazí pole s vašou adresou. Nižšie je uvedený odkaz na zobrazenie mapy vo väčšej mierke.
Všetko je teda veľmi jednoduché, funkčné a pohodlné.
Použitie na zdravie!
Budem rád, ak bude táto lekcia pre vás užitočná. Ako poďakovanie zanechajte svoje komentáre a zdieľajte článok pomocou tlačidiel sociálnych médií nižšie.
Prihláste sa tiež na odber aktualizácií blogu, ak ešte nie ste prihlásený. Sľubujem vám veľa užitočných materiálov.
Bola s vami Anna Kotelniková.
Veľa šťastia a uvidíme sa znova.
Dnes offline podnikanie nezaujíma znamenie, ale bloky s informáciami o podniku na pravej strane výsledkov vyhľadávania Google a Yandex. Poďme sa porozprávať o tom, ako pridať firemné údaje do máp.
Ako pridať firmu do máp Google
V službe musíte vytvoriť stránku Moja firma na Googli.
čo to dáva? V prvom rade možnosti:
- informovať používateľov o cenách, otváracích hodinách, akciách a novinkách organizácie;
- sledovať recenzie a rýchlo na ne reagovať;
- analyzovať zobrazenia obchodných informácií (počet zobrazení firemných údajov, zobrazení fotografií, videí);
- priložiť mapy s trasou do organizácie;
- budovať reputáciu prostredníctvom hodnotení používateľov.
Blokujte službu Moja firma na Googli vo výsledkoch vyhľadávania
Algoritmus na pridanie spoločnosti.
Ak list nedostanete do 3-4 týždňov, pokojne napíšte technickej podpore: „List neprišiel, čo mám robiť?“. Google vás vyzve, aby ste prešli procesom manuálneho overenia.
Ak to chcete urobiť, budete musieť poslať niekoľko fotografií:
9. Potom budete presmerovaní na osobný účet vašej spoločnosti:
Na stránke „Informácie“ musíte poskytnúť čo najúplnejšie informácie o vašej spoločnosti:
- pridajte ďalšie kategórie, ktoré zodpovedajú vašej aktivite;
- pridajte popis vašej spoločnosti;
- uveďte hodiny prevádzky;
- spôsoby platby za tovar a služby;
- pridávať fotografie a videá;
- ako aj dodatočné informácie.
V popise spoločnosti sa snažte čo najpresnejšie napísať, čím presne sa zaoberáte: aké produkty alebo služby ponúkate.
Čím kompletnejšie a lepšie informácie o vašej spoločnosti sú prezentované, tým je pravdepodobnejšie, že ich uvidia používatelia Google.
Ak vytvárate webovú stránku pre firmu alebo službu, nevyhnete sa pridaniu mapy na stránku s umiestnením danej firmy alebo služby.
Túto funkciu poskytujú najmenej traja poskytovatelia: Yandex, Google a 2GIS.
Tu sa pozrieme na pridanie mapy Yandex a toto je možno najjednoduchší, najrýchlejší a navyše úplne bezplatný spôsob. Je potrebné poznamenať, že táto služba funguje prostredníctvom API a vyžaduje, aby mal používateľ stránky povolený javascript.
Zároveň je táto inštrukcia vhodná nielen pre WordPress, ale pre akúkoľvek stránku (aspoň pre „holý“ html), pretože kód na vloženie je univerzálny.
Pridanie mapy Yandex na stránku
1. Najprv musíte vytvoriť mapu. Ak to chcete urobiť, kliknite na odkaz na stránku konštruktora - https://tech.yandex.ru/maps/tools/constructor/ . Ak chcete pracovať v konštruktore, musíte mať účet v Yandex. Účet Yandex je rovnaký pre všetky služby: pošta, správca webu, peniaze atď. Ak ho ešte nemáte, musíte sa zaregistrovať.
2. Vo vyhľadávacom paneli (na obrázku zvýraznený červenou farbou) uvedieme adresu, ktorú potrebujete (región, mesto, ulica, dom). Dostaneme mapu so značkou a súradnicami adresy, ktorú potrebujete.
3. V prípade potreby môžete vykonať ďalšie nastavenia: zmeniť farbu a umiestnenie značky, mierku, typ zobrazenia (graf, satelit, hybrid) atď.
4. Potom zadajte názov a kliknite na tlačidlo „Uložiť a získať kód“ v spodnej časti obrazovky.
5. Potom sa zobrazí kód, ktorý musíte vložiť na svoju stránku na miesto, kde sa má mapa zobrazovať.
Ak pridávate kód na stránku v administračnom paneli WordPress, najskôr prepnite režim úpravy stránky na „Text“.
Po pridaní kódu sa mapa, ktorú ste vytvorili, začne automaticky odrážať na stránke.
Veľkosť zobrazenia je určená parametrami width a height. V prípade potreby môžete tieto hodnoty zmeniť vo výslednom kóde. Ak chcete mapu Yandex roztiahnuť na celú šírku obrazovky, zadajte hodnotu width=-1.
V tomto článku zvážime inštalácia máp Yandex bez použitia pluginu, takže je vhodný ako pre bežnú stránku, tak aj pre stránku vytvorenú na WordPress engine. Prečítajte si o pridávaní máp Google.
Mapy Yandex (mapy Yandex) je skvelý nástroj, ktorý vám umožní nahlásiť polohu kancelárie, skladu alebo predajne. Umiestnením sánok na webovú stránku Yandex s podrobnou mapou polohy si môžete byť istí, že sa klient nestratí.
Ak ste majiteľom internetového obchodu, môžete objednávkový formulár vybaviť mapou, ktorá vám umožní klientovi uviesť vašu polohu, čo výrazne ušetrí čakaciu dobu. A kuriér vám bude vďačný.
Mapy Yandex majú mapy metra a dopravné údaje, vďaka ktorým sa vyhnú mnohým nepríjemnostiam a ušetria čas.
Ak porovnáme mapy Yandex a Google (pridanie máp Google na stránku), uprednostním službu máp Yandex, pretože ponúka viac príležitostí pre používateľa. Nehovoriac o tom, že najlepšie detaily majú mapy Yandex a tiež ľudová mapa, ktorú si upravujú sami používatelia zo satelitných snímok.
Možno skončíme s predohrou, ako sa hovorí: „Je lepšie raz vidieť ...“.
Inštalácia (pridanie) máp Yandex na vašu stránku
Predtým ako nainštalujte mapu Yandex na svoj web, je potrebné ho vytvoriť. Môžete to urobiť v konštruktore mapy:
Zmena veľkosti mapy presunutím štítkov. Umožní vám to vizuálne určiť, ako bude vyzerať mapa nainštalovaná na stránke. Na pomoc návrhárom rozloženia sa pod mapou zobrazuje výška a šírka v pixeloch.
Kopírovanie kódu:
Tento kód mapy sa dá jednoducho vložiť do miniaplikácie WordPress s ľubovoľným textom alebo html kódom:
Najdôležitejšie sú výška a šírka, takže ich možno zmeniť bez toho, aby ste sa museli znova vracať na stránku návrhára máp.
Kód mapy môžete vložiť aj do príspevku alebo stránky WordPress. Jediným bodom je, že ho musíte vložiť do html editora a nie do vizuálneho.
Vysledok prace:
Na vytvorenie sa predtým používal api-key. V súčasnosti sa jeho použitie nevyžaduje. Mali by ste si však prečítať niekoľko odporúčaní Yandex:
Rozhranie API pre mapy Yandex pre vývojárov má širokú škálu funkcií, ktoré je možné vložiť na vaše stránky a výrazne zlepšiť funkčnosť máp:
Taktiež je možné určiť polohu používateľa a mnoho ďalšieho.
Príklady kódu týchto a ďalších máp nájdete v karanténe rozhrania API Yandex:
Jeden z príkladov (smerovanie a cena) vložených na vaše stránky. Vyberte 2 body na mape, potom kliknite na počiatočný bod, vyskakovacie okno zobrazí informácie o cene dopravy.
(dobrá vec), dnes budeme opäť hovoriť o službe od spoločnosti Yandex a opäť o kartách, ale nie o plastových alebo hracích kartách, ale o mapách oblasti. Zoberme si návrhára máp od spoločnosti Yandex, pomocou ktorého môžete vytvoriť napríklad mapu smeru do svojej kancelárie a zavesiť ju na stránku. Tento článok obsahuje podrobné pokyny na nastavenie služby Mapy Yandex pre kontaktnú stránku osobnej stránky.
Schopnosť pomôcť zákazníkom dostať sa na správne miesto je významným prínosom pre rozvoj podnikania, čím viac ľudí sa dostane tam, kam potrebujú, tým vyšší bude príjem a zisk. Ak je teda vaša firma nejakým spôsobom spojená s predmetmi na zemi, potom je vloženie dobrej mapy na stránku nevyhnutnosťou.
Prečo potrebujete interaktívnu mapu
- Pohodlné pre klienta - je ľahké naplánovať trasu s prihliadnutím na všetky aktuálne zmeny, pretože Yandex rýchlo zadáva údaje o opravách a nových budovách na svojich mapách.
- Pre majiteľa stránky je to výhodné - všetky úpravy sa na mape vykonajú automaticky, mapu stačí vložiť na stránku raz, potom sa aktualizácie načítajú z databázy Yandex samotné.
- Zvyšuje dôveryhodnosť a úroveň dôvery v organizáciu. Hoci takýto krém dokáže vyrobiť každá karikatúrno-montážna kancelária, na podvedomej úrovni je stránka s interaktívnou mapou vnímaná lepšie.
Za starých čias adresy kancelárií, trasy prechodov a cestovania, rôzne zaujímavé objekty atď. označené na obrázkoch znázorňujúcich mapu a odovzdané na stránku v bežnom súbore jpg alebo png. Problém bol v tom, že nevedeli zohľadniť provizórne opravy, zápchy či iné zmeny terénu, nevedeli navrhnúť jednotlivé trasy z rôznych smerov.
S rozvojom internetových služieb, ako sú Yandex Maps a Google Maps, bolo možné oživiť mapy – interaktívne. Môžete ich otáčať rôznymi smermi, meniť mierku, nastavovať trasy z rôznych bodov, plánovať si pohyb s prihliadnutím na dopravné zápchy a mnoho ďalšieho.
Prítomnosť vhodnej mapy polohy na kontaktnej stránke v našej dobe je dobrým pravidlom pre každú spoločnosť.
A aby sme vám pomohli urobiť váš webový zdroj priateľskejším k ľuďom, poviem vám, ako pridať mapu Yandex na stránku, čo sa robí veľmi jednoducho pomocou špeciálneho konštruktora (nie ťažšieho ako).
Yandex Map Constructor
Ak nemáte účet v Yandex, budete si ho musieť vytvoriť, pretože bez toho nebude fungovať nič, služba vás požiada o prihlásenie alebo registráciu. Nie je potrebné sa báť, registrácia je vytvorenie poštovej schránky na Yandex. Aj keď ho nepotrebujete na prácu s e-mailom, bude sa hodiť pre iné služby vyhľadávača, napríklad pre Yandex Metrika alebo Yandex Webmaster.
Postup začína na tejto stránke - tech.yandex.ru/maps/tools/constructor/
Keďže čítate tento článok, znamená to, že sa prihlasujete prvýkrát a nemáte predtým uložené karty, zostáva vybrať ľavé žlté tlačidlo „Vytvoriť novú kartu“. Od tohto momentu začína tvorba individuálnych nastavení mapy pre požadovanú oblasť.
Trik je v tom, že môžete vložiť nielen mapu Yandex s presnou adresou, ale mapu s ľubovoľným počtom objektov zvýraznených rôznymi značkami a farbami - objekty, body, trasy.
Všetky nastavenia sa vykonávajú vo vizuálnom konštruktore, nebudú sa musieť upravovať žiadne kódy, adaptačné práce sa len málo líšia od bežného používania máp Yandex používateľom. Začnime pridávaním objektov.
Pridávanie objektov
Prvým nástrojom je vyhľadávací formulár, ktorý sa nachádza v hornej časti mapy. S jeho pomocou nájdeme požadovaný bod podľa adresy, súradníc alebo názvu. Do poľa zadajte údaje požiadavky, príklad s adresou „Moskva, Červené námestie“:
Po stlačení tlačidla nájsť sa na teréne objaví bod zodpovedajúci umiestneniu zadaného objektu. Môžete vložiť veľa predmetov. Príklad Kremľa:
Každý bod je možné nakonfigurovať tak, aby sa odlišoval od ostatných objektov a bol na mape ľahko rozlíšiteľný – mení sa farba, tvar a môžete si doň pridať aj unikátnu ikonku kliknutím na rozbaľovaciu ponuku „Obsah“. To je výhodné, ak je na vytvorenej mape veľa objektov a dajú sa zaradiť do rôznych skupín.
Vľavo je vyplnený zoznam všetkých adries vyznačených na mape.
Zmena mierky a polohy
Pomocou tlačidiel „+“ a „-“ umiestnených v ľavej hornej časti rozloženia sa nastaví optimálna mierka. Na pohyb po centre Moskvy nie je potrebná úplná mapa Ruska a ak zadávate bodový objekt v nejakom meste, je lepšie upraviť mierku na úrovni, kde sú rozlíšiteľné názvy ulíc a okolitých domov.
Ak chcete mapu posúvať rôznymi smermi, musíte ju chytiť stlačením ľavého tlačidla myši a presunúť ju tam, kam chcete.
Obrysy objektu (polygóny) a čiary
Ak je potrebné zvýrazniť obrysy akéhokoľvek prvku na mapách, keď ukazovanie nestačí, použite nástroj "Polygóny". Nastavením jedného bodu za druhým dostaneme obvod vyplnený vo vnútri určitou farbou.
Bodov môže byť toľko, koľko chcete, preto obrázok nakreslený na mape umožňuje akýkoľvek stupeň zložitosti. Konštrukciu obrysu dokončíte kliknutím na posledný nastavený bod alebo prepnutím na akékoľvek iné tlačidlo konštruktora (napríklad na čiaru). Zvýraznil som obrysy moskovského Kremľa pozdĺž jeho steny:
Čiary sa kreslia pomocou tlačidla "Čiarovky". Všetky akcie sú podobné predchádzajúcemu nástroju, len priestor medzi bodmi nie je premaľovaný. Pomocou čiar na mape Yandex môžete kresliť trasy pohybu (prechod, prechod).
Týmto spôsobom môžete ukázať najlepšiu trasu na prehliadku mesta.
Koncový bod potvrdíme opätovným kliknutím myšou, zobrazí sa ponuka „Vymazať“ / „Dokončiť“. Po výbere konca sa otvorí pole pre popis koncového bodu a nastavenie parametrov čiary (hrúbka, farba, priehľadnosť).
Trasu dokončíme kliknutím na „Hotovo“.
Zobrazenie mapy a prekrytie premávky
Posledným dotykom, ktorý vám umožní dať mape špeciálne vlastnosti, je ukladanie dopravných zápch, pre ktoré existuje samostatné tlačidlo. Úprimne povedané, pochybujem, že takáto možnosť bude často žiadaná pre mapy vložené na stránku, pretože ľudia používajú na riadenie auta častejšie navigátory ako vstavané mapy.
Ale prepínanie režimov medzi okruhovým, satelitným a hybridným môže prísť vhod.
Satelitný pohľad dáva okolitým objektom ich skutočný vzhľad a na takejto mape ich spoznáte ľahšie ako schematické obdĺžniky diagramu.
Názov a popis
Aby sme sa v budúcnosti mohli vrátiť k vytvorenej mape, aby sme ju opravili alebo znovu získali kód na vloženie, musíme pre ňu vymyslieť názov a popis a potom ju uložiť.
Kód mapy na vloženie na stránku
Naša mapa je už pripravená a teraz musíme získať jej kód na vloženie na stránku, Yandex umožňuje:
- interaktívna mapa (o ktorej som hovoril od samého začiatku);
- statický - obyčajný obrázok, len so zložitým kódom, nedá sa v ňom nič hýbať, navyše je obmedzený maximálny počet objektov;
- tlačený - vysoko kvalitný obrazový súbor, nie sú podporované všetky krajiny, najmä SNŠ a Turecko, satelitné a hybridné verzie nie sú podporované.
Výber medzi nimi sa zobrazí ihneď po uložení.
V tom istom menu sa nastavuje výsledná veľkosť v pixeloch. Môžete to nastaviť manuálne alebo posunutím rámu okolo vybranej oblasti vpravo za rohy. Začiarkavacie políčko „Roztiahnuť na šírku“ spôsobí, že mapa zaberie celý priestor na lokalite a bude spočívať na okrajoch bloku, kde je zobrazená.
V tejto fáze je možné vrátiť sa k úprave mapy, v ľavej hornej časti okna je príslušný nápis so šípkou.
Konečný kód sa zobrazí po kliknutí na tlačidlo „Získať kód karty“, môj vyzerá takto:
Pri výbere tlačenej karty sa pridá výber formátu súboru - png alebo jpg, a preto nebude existovať žiadny kód - namiesto toho sa zobrazí tlačidlo sťahovania. Takýto súbor je možné vložiť aj na stránku, len ho budete musieť nahrať na hosting a ak vaša stránka nemá vizuálny editor, budete musieť obrázok vypísať v HTML tagoch (src)
Ako vložiť mapu Yandex na stránku
Dostali sme kód, teraz ho musíme preniesť do nášho webového zdroja. Na umiestnenie je vhodné akékoľvek miesto, hlavná vec je, že rozmery sedia. Ak používate dizajnérov alebo vizuálnych editorov, potom ich nezabudnite pri vkladaní kódu prepnúť do textového (HTML) režimu. Páči sa ti to:
Mapa, ktorú som vytvoril
Tu je to, čo som dostal po všetkých nastaveniach:
Tento prvok je vhodný pre každého - a potrebné objekty sú zvýraznené a mierka je vybraná podľa očakávania. Okrem toho služba Yandex umožňuje používateľovi určiť svoju polohu (šípka v ľavom hornom rohu) a zostaviť individuálnu trasu do požadovaného bodu.
Tlačidlo v pravom hornom rohu vo forme dvoch šípok, ktoré sa rozchádzajú v rôznych smeroch, vám umožňuje otvoriť mapu na celú obrazovku. Teraz o pluginoch.
Pluginy pre WordPress a ďalšie CMS
Predtým bolo vytváranie máp náročnejšie a mnohí na tento účel používali špeciálne pluginy, napríklad pre WordPress bol tento – Yandex Maps for WordPress. Teraz nie sú potrebné žiadne rozhrania API a každý používateľ s minimálnymi znalosťami príde na to, ako všetko nastaviť, takže nevidím zmysel v doplnkoch. Doplnok uvedený vyššie to potvrdzuje - nebol aktualizovaný viac ako 2 roky, zjavne nie je dopyt.
Z relatívne relevantných som našiel Yandex Maps API (aktualizované pred 4 mesiacmi) a Oi Yandex.Maps pre WordPress (pred 5 mesiacmi). Ak chcete hrať pluginy, nájdete ich v repozitári WordPress vyhľadávaním a ako nainštalovať pluginy.
Sami ste sa uistili, že príprava mapy a jej umiestnenie na váš zdroj je oveľa rýchlejšie ako čítanie tohto návodu, teraz každý z vašich zdrojov poteší svojich návštevníkov takouto pohodlnou funkciou.
