{"id":644,"date":"2023-03-03T09:00:39","date_gmt":"2023-03-03T09:00:39","guid":{"rendered":"http:\/\/localhost\/wordpress\/?p=644"},"modified":"2023-03-09T19:08:27","modified_gmt":"2023-03-09T19:08:27","slug":"jak-vytvorit-zdarma-vlastni-mapu-na-webovky","status":"publish","type":"post","link":"http:\/\/localhost\/wordpress\/jak-vytvorit-zdarma-vlastni-mapu-na-webovky\/","title":{"rendered":"Jak vytvo\u0159it jednodu\u0161e vlastn\u00ed mapu na webovky"},"content":{"rendered":"\n

Vid\u00edme to na mnoha r\u016fzn\u00fdch webov\u00fdch str\u00e1nk\u00e1ch firem, co maj\u00ed v\u00edce pobo\u010dek, r\u016fzn\u00e9 odd\u011blen\u00ed atp. Pokud takov\u00e9to mapy chcete tak\u00e9, m\u016f\u017eete si najmout grafika a front-end developera<\/strong>, kter\u00e9 v\u00e1m je na m\u00edru ud\u011blaj\u00ed, nap\u0159\u00edklad s 3D renderem developersk\u00e9ho projektu je\u0161t\u011b p\u0159ed jeho v\u00fdstavbou (ano, i to jde).<\/p>\n\n\n\n

Ov\u0161em budete jist\u011b p\u0159ekvapeni, \u017ee pokud v\u00e1m sta\u010d\u00ed vkl\u00e1dat na mapy p\u0159eddefinovan\u00e9 ikony<\/strong> \u010di vlastn\u00ed, barevn\u011b odli\u0161it m\u00edsta, vytv\u00e1\u0159et v\u00edce tras na jednou<\/strong> (nap\u0159\u00edklad pokud pl\u00e1nujete proch\u00e1zku po pam\u00e1tk\u00e1ch, proj\u00ed\u017e\u010fku na motorce \u010di turistiku v hor\u00e1ch) a dokonce i tvo\u0159it na map\u00e1ch jednoduch\u00e9 barevn\u00e9 polygony<\/strong>, jde to pouh\u00fdmi p\u00e1r kliknut\u00edmi<\/strong> ud\u011blat ve webov\u00e9 aplikaci Google My Maps<\/a>. Ta byla poprv\u00e9 spu\u0161t\u011bna v roce 2007, co\u017e je vid\u011bt na prvn\u00ed pohled. Nenechte se ale t\u00edmto nostalgick\u00fdm rozhran\u00edm odradit, mapa p\u0159in\u00e1\u0161\u00ed spoustu r\u016fzn\u00fdch u\u017eite\u010dn\u00fdch funkc\u00ed a \u0161irokou \u0161k\u00e1lu \u00faprav. V tomto \u010dl\u00e1nku si ty nejd\u016fle\u017eit\u011bj\u0161\u00ed rozebereme.<\/p>\n\n\n\n

Vytvo\u0159en\u00ed mapy<\/h2>\n\n\n\n

V aplikaci Google My Maps<\/a> si vytvo\u0159\u00edte novou mapu a pojmenujete ji, n\u00e1zev se bude zobrazovat i v embedded – vlo\u017een\u00e9 verzi na va\u0161ich str\u00e1nk\u00e1ch, tak\u017ee je vhodn\u00e9 volit u\u017eite\u010dn\u00fd n\u00e1zev a nenech\u00e1vat v\u00fdchoz\u00ed „Mapa bez n\u00e1zvu“.<\/p>\n\n\n\n

Podkladov\u00e1 mapa<\/h3>\n\n\n\n

Je na v\u00fdb\u011br n\u011bkolik podkladov\u00fdch map, vyberete si tu, kter\u00e1 se hod\u00ed pro konkr\u00e9tn\u00ed p\u0159\u00edpad. Osobn\u011b vn\u00edm\u00e1m nejv\u00edc univerz\u00e1ln\u00ed mapu „Sv\u011btl\u00e1 politick\u00e1“, vlevo veprost\u0159ed:<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

M\u00edsta<\/h3>\n\n\n\n

Pro p\u0159id\u00e1n\u00ed m\u00edsta kliknete na ikonku \u0161pendl\u00edku, stejn\u011b jako v klasick\u00fdch google map\u00e1ch:<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Ukazatel my\u0161i se zm\u011bn\u00ed na k\u0159\u00ed\u017e, t\u00edm najedete na m\u00edsto, kter\u00e9 chcete vybrat a kliknete prav\u00fdm tla\u010d\u00edtkem, pojmenujete pak nov\u011b vytvo\u0159en\u00fd bod v aktu\u00e1ln\u011b zvolen\u00e9 vrstv\u011b<\/a> a d\u00e1te mu libovoln\u00fd n\u00e1zev a popis<\/strong>, m\u016f\u017eete p\u0159ilo\u017eit i fotky<\/strong>, kter\u00e9 se v\u010detn\u011b popisu zobraz\u00ed t\u011bm, co si budou m\u00edsto na va\u0161\u00ed map\u011b prohl\u00ed\u017eet.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Nalevo ve vrstv\u011b m\u016f\u017eete nastavit styl bod\u016f, bu\u010f zvolit jednotn\u00fd<\/strong>, \u0159adu \u010d\u00edsel nebo jednotn\u00e9 <\/strong>– kter\u00e9 umo\u017en\u00ed ka\u017ed\u00e9 m\u00edsto zobrazovat samostatn\u00fdm stylem (r\u016fzn\u00e1 ikona atp.). S dal\u0161\u00edmi \u00fapravami si jist\u011b ka\u017ed\u00fd vyhraje jak um\u00ed.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n
\n
\"\"<\/figure><\/div>\n\n\n

Vrstvy<\/h3>\n\n\n\n

Vrstvy vizu\u00e1ln\u011b odd\u011bl\u00ed skupiny m\u00edst v postrann\u00edm panelu (pop\u0159\u00edpad\u011b i na map\u011b, pokud je odd\u011bl\u00edte jednotn\u00fdm stylem vrstev). V postrann\u00edm panelu si u\u017eivatel m\u016f\u017ee vrstvy odkliknout, aby je nevid\u011bl i opa\u010dn\u011b. Jednotliv\u00e9 vrstvy m\u016f\u017eete odeb\u00edrat, p\u0159id\u00e1vat a jakkoliv jinak upravovat. V mnoha p\u0159\u00edpadech jist\u011b posta\u010d\u00ed jen jedna.<\/p>\n\n\n

\n
\"\"
Zobrazen\u00ed vrstev po otev\u0159en\u00ed postrann\u00edho panelu<\/figcaption><\/figure><\/div>\n\n\n

Polygony<\/h3>\n\n\n\n

Vedle ikony pro p\u0159id\u00e1n\u00ed m\u00edsta se nach\u00e1z\u00ed ikona „nakreslit \u010d\u00e1ru“, krom\u011b \u010d\u00e1ry v\u00e1m umo\u017en\u00ed nakreslit i polygony \u010di trasy pro auta, kola a p\u011b\u0161\u00ed.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

D\u00e1le u\u017e jen klik\u00e1te body, a\u017e budete m\u00edt hotovo, stisknete enter<\/kbd> a pojmenujte obrazec. Jak u \u010d\u00e1ry tak polygonu m\u016f\u017eete upravovat obrys<\/strong> a v\u00fdpl\u0148<\/strong>, p\u0159i\u010dem\u017e u obrysu jde m\u011bnit tlou\u0161\u0165ka<\/strong> a u v\u00fdpln\u011b zase pr\u016fhlednost<\/strong>. Na n\u00e1sleduj\u00edc\u00edm obr\u00e1zku si m\u016f\u017eete v\u0161imnout, \u017ee u obrazc\u016f se se zobraz\u00ed i \u00fadaje o rozloze<\/strong> a obvodu<\/strong>. Tyto \u00fadaje<\/strong> se ov\u0161em t\u011bm, co si zobraz\u00ed va\u0161\u00ed mapu nebudou zobrazovat<\/strong>. Pokud je chcete zobrazit n\u00e1v\u0161t\u011bvn\u00edk\u016fm va\u0161\u00ed mapy, zkop\u00edrujte je do popisu \u010di n\u00e1zvu.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Vlo\u017een\u00ed mapy na web<\/h3>\n\n\n\n

Vlo\u017een\u00ed je z cel\u00e9ho postupu nejv\u00edce trivi\u00e1ln\u00ed. Nejd\u0159\u00edve se ujist\u011bte, \u017ee m\u00e1te mapu nastavenou jako ve\u0159ejnou: klepn\u011bte na sd\u00edlet<\/strong> a n\u00e1sledn\u011b zapn\u011bte mo\u017enost obsah uvid\u00ed kdokoli, kdo m\u00e1 odkaz<\/strong>.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n
\n
\"\"<\/figure><\/div>\n\n\n

Potom jen sta\u010d\u00ed kliknout na t\u0159i svisl\u00e9 te\u010dky<\/strong> vedle n\u00e1zvu mapy a zvolit z rozbalovac\u00edho menu mo\u017enost Vlo\u017eit na m\u00e9 str\u00e1nky<\/strong>. N\u00e1sledn\u011b zkop\u00edrujete vyzna\u010den\u00fd k\u00f3d a kliknete OK<\/strong>.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n\n

Ve va\u0161\u00ed WordPress administraci vyberete m\u00edsto, kam chcete mapu um\u00edstit a p\u0159id\u00e1te blok vlastn\u00ed HTML<\/strong>. Do n\u011bj ji\u017e jen vlo\u017e\u00edte text, aktualizujete danou str\u00e1nku a m\u00e1te hotovo! M\u016f\u017eete si vyzkou\u0161et, jak mapa bude vypadat je\u0161t\u011b ne\u017e aktualizujete str\u00e1nku, pokud kliknete na n\u00e1hled<\/strong>.<\/p>\n\n\n

\n
\"\"<\/figure><\/div>\n\n
\n
\"\"<\/figure><\/div>\n\n\n

Vyu\u017eit\u00ed map pro osobn\u00ed \u00fa\u010dely<\/h3>\n\n\n\n

Vlastn\u00ed mapy se skv\u011ble hod\u00ed pro pl\u00e1nov\u00e1n\u00ed cestov\u00e1n\u00ed. M\u016f\u017eete si pe\u010dliv\u011b <\/strong>a hlavn\u011b p\u0159ehledn\u011b <\/strong>napl\u00e1novat trasu nap\u0159\u00edklad na dovolenou, \u010di jen jednodenn\u00ed v\u00fdlet. Mapy pak m\u00e1te ulo\u017een\u00e9 i v mobiln\u00ed aplikaci Google maps<\/strong>, tak\u017ee k nim m\u00e1te snadn\u00fd p\u0159\u00edstup.<\/p>\n\n\n\n

Nap\u0159\u00edklad: p\u0159ed za\u010d\u00e1tkem letn\u00edho semestru jsme si s p\u0159\u00edtelkyn\u00ed zorganizovali jednodenn\u00ed v\u00fdlet do Dr\u00e1\u017e\u010fan, ke kter\u00e9mu jsme pr\u00e1v\u011b vyu\u017eili takovou mapu:<\/p>\n\n\n\n