Jak nastavit značky a ikony v Mapách Google

Společnost Google v průběhu let neustále zdokonaluje své nástroje, aby poskytovala výjimečné služby založené na poloze. Mezi klíčové funkce umožňující interakci patří značky – tyto barevné symboly rozmístěné po celé mapě. Jsou základním vizuálním prvkem pro uživatele při orientaci v digitálním geografickém prostředí.

V tomto článku naši odborníci na Google Maps Platform představí zavedení pokročilých značek, a to na základě postřehů produktové manažerky Alicie Sullivan. Tato dlouho očekávaná funkce odráží jeden z nejčastějších požadavků vývojářské komunity. Podívejme se, jak tato globální technologická společnost reagovala na tyto potřeby a jak nyní můžete vytvářet rychlejší, lépe přizpůsobitelné a vizuálně působivé mapové prostředí pro své uživatele.

Jak změnit ikonu značky v Mapách Google a vytvářet vizuálně poutavé značky

Klasické červené značky, které se zobrazují na vybraných místech, pravděpodobně dobře znáte. Možná jste se už zajímali, jak změnit jejich barvu v Mapách Google. Díky novým pokročilým funkcím je nyní možné upravit téměř každý vizuální detail – pozadí, obrys, ikonu (glyf), velikost a samozřejmě barvu. Výchozí červenou značku si dokonce můžete znovu vytvořit čistě pomocí kódu, bez nutnosti použití obrázkových souborů.

Představte si, že jste maloobchodní společnost s několika pobočkami v jednom městě. Pomocí barev typických pro vaši značku budou vaše mapové značky na první pohled rozpoznatelné. Jde o jednoduchý způsob, jak zpřehlednit mapu pomocí vlastních značek.

Pokud například řídíte logistickou firmu, můžete pomocí barevných změn v reálném čase vizuálně znázornit stav doručení. Stejně tak mohou cestovní agentury přiřadit různé ikony a barvy různým službám v okolí hotelů, čímž uživatelům usnadní výběr ideálního pobytu.

Vytváření dynamických značek v Mapách Google pomocí HTML a CSS

Pro tvorbu interaktivních a animovaných značek nyní můžete použít CSS k úpravě velikosti, průhlednosti, polohy a barev. Pokročilé značky se vykreslují jako HTML prvky přímo v DOM, což z nich činí plně flexibilní součást webové stránky.

S využitím vlastního HTML a CSS můžete od základu navrhnout zcela jedinečné značky. Nepotřebujete žádné externí obrázky ani překryvné vrstvy. Například realitní platformy mohou přímo v ikonách zobrazovat cenu, rozlohu nebo další důležitá data – přímo v mapě a přehledně.

Mapy Google: Změňte ikonu značky pomocí vlastní grafiky

Můžete použít svůj vlastní obrázek jako ikonu? Rozhodně ano. Aktualizované rozhraní API nyní nativně podporuje formáty SVG a PNG, takže můžete přímo integrovat vlastní ikony nebo fotografie jako značky. To znamená, že už nejste omezeni na generické vizuály.

Ať už chcete změnit ikony značek v Mapách Google nebo kompletně přizpůsobit vzhled mapového rozhraní vaší značce, s pokročilými funkcemi je integrace vlastních vizuálů maximálně jednoduchá.

Jak změnit barvu uložených míst v Mapách Google

Obáváte se, že by přizpůsobení mohlo zpomalit načítání mapy? Není třeba. Pokročilé značky se vykreslují až o 66 % rychleji než standardní a zajišťují plynulý pohyb při posouvání a přibližování.

Důraz je kladen také na přístupnost: značky lze nyní ovládat výhradně pomocí klávesnice. Pokud je značka klikací nebo přetahovatelná, reaguje jak na vstup z klávesnice, tak z myši. Ani při změně barvy uložených míst tak nemusíte obětovat výkon ani použitelnost.

Změna ikony značky v Mapách Google na mobilních zařízeních

API pro pokročilé značky, uvedené v květnu 2023, podporuje jak iOS, tak Android. Vývojáři mohou používat nativní vykreslovací prvky – UIViews pro iOS a Views pro Android – pro plynulý výkon napříč platformami.

S využitím Jetpack Compose a knihovny Maps SDK Utility Library mohou vývojáři pro Android využít funkce jako clustering a kompatibilitu s Compose. Na straně JavaScriptu knihovna Advanced Markers Utility Library slučuje funkce napříč třídami, což výrazně usnadňuje přiřazení dynamických vlastností, nastavení fontů ikon nebo výběr automaticky generovaných barev značek.

Stručně řečeno: ať už pracujete na mobilním zařízení nebo na počítači, úprava ikon a vzhledu značek je nyní jednotná a přehledná napříč všemi platformami.

Měli byste stále používat starší třídu značek?

Původní třída google.maps.Marker Marker je sice stále dostupná, ale od vydání verze 3.56 Maps JavaScript API je oficiálně označena jako zastaralá. Novým standardem se stala google.maps.marker.AdvancedMarkerElement.

Přechodem na tuto novou třídu získáte rychlejší vykreslování, jednodušší přizpůsobení, lepší přístupnost a širší možnosti stylování. Zatímco starší verze bude nadále dostávat opravy chyb, nové aktualizace se budou vztahovat výhradně na pokročilou variantu.

Pokud tedy stále používáte starší API a přemýšlíte, jak změnit ikonu značky v Mapách Google, přechod na nové rozhraní Advanced Marker je ideálním řešením.

Potřebujete podporu pro Mapy Google a další produkty Google?

Jako globální Google Cloud Premier Partner je Cloudfresh uniktním centrem odborných služeb a řešení. Naši specialisté s certifikací Technical Fundamentals vám rádi poskytnou podporu při využívání nástrojů Google Maps Platform (GMP).

Co vám nabízíme?

1. Konzultace při výběru optimálního API a jeho integraci;
2. Vývoj služeb založených na GMP s důrazem na efektivní implementaci, snížení využití kvót a maximální výkon;
3. Technické školení vašich týmů pokrývající celý rozsah služeb Google Maps API;
4. Technickou podporu včetně řešení incidentů, konzultací správného využití služeb apod;
5. Zaručenou reakci v rámci SLA.

Navíc spoluprací s Cloudfresh získáte:

• Přístup k sedmistupňovému systému slev, dostupnému pouze skrze oficiálního partnera;
• Možnost fakturace právnické osobě v EUR, USD, CZK, PLN, UAH nebo i v jiné měně (včetně kryptoměn);
• Spolupráci ve vašem rodném jazyce díky vícejazyčnosti našeho týmu.

Jako certifikovaný partner Google Maps poskytujeme profesionální podporu po celou dobu práce s těmito službami.

Spojte se s naším týmem a využijte příležitosti zlepšit svou IT infrastrukturu a posunout uživatelský zážitek svých zákazníků na vyšší úroveň díky službám Google Maps.

Rychlé rady

Naši odborníci často dostávají různé dotazy týkající se přizpůsobení Map Google. Abychom vám pomohli co nejlépe využít možnosti mapových úprav, připravili jsme přehled odpovědí na nejčastější otázky:

Jak změnit značku v Mapách Google?

S využitím Advanced Marker API můžete upravit pozadí, glyf nebo použít vlastní obrázek. Značku lze ovládat i dynamicky pomocí JavaScriptu nebo CSS.

Jak změnit barvu značky v Mapách Google?

Barvu značky přizpůsobíte pomocí atributu style v konfiguračním objektu. To je zvlášť užitečné při rozlišení kategorií nebo stavů.

Jak změnit ikonu značky na mapě Google?

Nahrajte soubor ve formátu SVG nebo PNG a odkažte se na něj pomocí vlastnosti icon v objektu značky.

Jak změnit ikonu značky v Mapách Google?

Ikony nyní můžete zcela nahradit vlastními návrhy – a to i dynamicky, podle akcí uživatele nebo na základě aktualizovaných dat.

Jak změnit barvu uložených míst v Mapách Google?

Standardní aplikace Mapy Google nepodporuje přímou změnu barvy uložených míst, ale pomocí nástroje Moje mapy je můžete seskupit, barevně odlišit nebo doplnit o popisky.

Můžeme stále používat starší třídu?

Můžete, ale je již zastaralá. Pro přístup ke všem nejnovějším vylepšením výkonu a přizpůsobení byste měli přejít na třídu AdvancedMarkerElement. Patří sem vše od základů, jak změnit značku v Mapách Google, až po pokročilé aktualizace v reálném čase.