Jak zobrazit ikony typu místa ve výsledcích funkce Autocomplete

By Říjen 23, 2019 Blog
mapa_pinezka1

Společnost Google nedávno oznámila několik novinek pro službu Places Autocomplete v platformě Google Maps. Jednou z nových funkcí je možnost přidat ikony pro různé typy predikovaných míst ve výsledku automatického doplňování, kdy pole types bude obsahovat více typů míst (úplný seznam možných typů míst naleznete v Google dokumentaci).

Jako vývojáři můžete tyto nové informace v odpovědi využít k vylepšení zobrazování míst v našeptávači zobrazením odpovídající ikony vedle každého výsledku. Jak ale získat ikony pro každý typ místa? A co když chcete tyto ikony použít v jiných oblastech, kde Vaše aplikace využívá Places API, například ve výsledcích Place Search?

Pojďme se podívat na krátkou ukázku JavaScrip kódu, kde se přidaly ikony typu místa k výsledkům funkce Autocomplete v Tokiu.

autocomplete-place-type-icons

Autocomplete s ikonami podle typu míst

Ve výše uvedeném scénáři je nastavena relace automatického doplňování s lokalizací pro Tokio (Japonsko) a filtrem pro typ „establishment“ (podnik). V příkladu vlevo, když uživatel zadá „na“, zobrazí se seznam míst bez diferencovaných ikon. Na rozdíl od příkladu vpravo, kde se po zadání „na“ zobrazí ikony míst rozlišující typy podniků.

Jak získat ikony?

Pokud neplánujete vytvářet vlastní grafiku pro jednotlivé ikony, můžete použít ikony známé z aplikace Google Mapy, které dali grafici z Googlu k dispozici jako material icons. Ty jsou mezi uživateli známé a Vám zároveň odpadá práce s udržováním. A jak tvůrci vysvětlují použitelnost této grafiky?

Každá ikona je tvořena tak, aby v jednoduchých a minimálních formách vyjadřovala univerzální koncepty běžně používané v uživatelském rozhraní. Tyto ikony, které jsou čitelné a srozumitelné ve velkých i malých velikostech, byly optimalizovány pro zobrazení na všech běžných platformách a rozlišení.

Google Material Design tým

Příklad automatického doplňování z tohoto článku byl vytvořen jako webová aplikace a bylo použito písmo ikon z Google Web Fonts. Do hlavičky <head> HTML stránky byl přidán pouze jeden řádek kódu:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Průvodce Google Material Icons také poskytuje pokyny pro vlastní hostování souborů písem nebo obrázků, vložení těchto ikon do aplikace pro Android nebo iOS a zobrazení ikon v uživatelském rozhraní jazyka RTL (right-to-left). Nejlepší je, že tyto ikony jsou zcela zdarma pro všechny s licencí Apache verze 2.0.

Přidání ikon do výsledků Autocomplete

Níže vytvořená funkce kontroluje, zda byl vybraný typ ve vlastnostech predikce. Pokud se typ shoduje s tím, který chceme rozlišit speciální ikonou, přiřadí se k tomuto typu místa materiálová ikona, která mu nejlépe odpovídá. Ve výchozím nastavení se používá obecná ikona místa pro všechny typy míst, pro které není specifikována konkrétní ikona.

// Builds a div for each prediction with the appropriate icon
function populate(predictions) {
    predictions.forEach(element => {
        const predictionItem = document.createElement('div');
        const predictionIcon = document.createElement('div');
        const typesList = element.types;
        let materialIcon;
        switch (true) {
            case (typesList.includes('airport')):
                materialIcon = 'local_airport';
                break;
            case (typesList.includes('restaurant')):
                materialIcon = 'restaurant';
                break;
            case (typesList.includes('store')):
                materialIcon = 'local_mall';
                break;
            default:
                materialIcon = 'place';
        }


        predictionIcon.innerHTML = `<i class="material-icons">${material_icon}</i>`;
        predictionItem.append(predictionIcon);
    });
}

Výše uvedený kód zobrazuje pouze typy míst z uvedeného příkladu z Tokia. Můžete si ale přidat další propojení pro všechny možné typy míst.

Jak Google Mapy mohou podpořit moje podnikání?

Zdrojový článek: https://cloud.google.com/blog/products/maps-platform/how-to-show-place-type-icons-in-place-autocomplete-results