Skip to main content

Jak wyświetlać ikony obrazujące rodzaj miejsca w wynikach Places Autocomplete?

By 15 października, 201924 lutego, 2020Google - aktualności

W ostatnim czasie Google ogłosiło kilka nowych rozwiązań dla usługi Places Autocomplete na Platformie Google Maps. Jednym z nich jest dodanie większej ilości rodzajów miejsc, które zawiera pole types dla każdej podpowiedzi zwracanej w odpowiedzi na wyszukiwanie Autocomplete. Pełną listę możliwych rodzajów miejsc możesz zobaczyć w dokumentacji Google.

Jako deweloper strony, możesz wykorzystać ten nowy rodzaj przekazywania użytkownikowi informacji do ulepszenia wyświetlania wyników Autocomplete szukanych miejsc. Każdy zwracany wynik może wyświetlać odpowiadające typom miejsc ikony obok nazw. Jak uzyskać ikony dla każdego typu miejsca? Co zrobić w sytuacji, gdy chcesz wykorzystać ikony w innych obszarach, gdzie Twoja aplikacja używa Places API, jak np. w wynikach wyszukiwarki Places?

Spójrzmy na przykład JavaScript, w którym dodano ikony typów miejsc do wyników Autocomplete na mapie Tokio:

autocomplete-ikony-miejsc

Autocomplete z ikonami typów miejsc

W powyższym przypadku, sesja Autocomplete została ustawiona z lokalizacją zorientowaną na Tokio i filtrem typów miejsc „przedsiębiorstwo”. W przykładzie z lewej strony, użytkownik wpisał „na” w pasek wyszukiwania. Lista podpowiedzi rozwija się bez rozróżnionych ikonek dla typów pokazywanych miejsc. Inaczej jest w przykładzie po prawej – wyniki pokazują odpowiednie ikonki dla typów miejsc i odróżniają sugestie dla użytkownika.

Jak uzyskać ikony?

Jeśli nie chcesz tworzyć własnych grafik dla ikon, możesz wykorzystać ikony Google znane z aplikacji Google Maps i dodatkowo zyskać na ich rozpoznawalności przez użytkowników. Co więcej, Google może być hostem ikon i utrzymywać je za Ciebie. Dział material design Google udostępnia material icons. Twórcy wyjaśniają użyteczność tych grafik:

“

Każda z ikon jest tworzona przy zachowaniu wytycznych stylu projektowania Google, aby w prosty i minimalistyczny sposób ilustrować uniwersalne idee występujące w interfejsach użytkowników. Zapewniając czytelność i przejrzystość zarówno w małym, jak i w dużym rozmiarze, ikony zostały zoptymalizowane, by atrakcyjnie prezentować się na wszystkich powszechnych urządzeniach i przy każdej rozdzielczości ekranu.

Zespół Material Design Google

Przykład Autocomplete z tego artykułu został stworzony jako aplikacja internetowa i użyta została czcionka ikon z Google Web Fonts. W <head> strony HTML dodana została jedynie jedna linijka kodu:

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

Przewodnik Material Icons Google podaje instrukcje samodzielnego hostowania czcionki lub plików graficznych, wstawiania ikon do aplikacji Android lub iOS oraz wyświetlania ich w interfejsie użytkownika RTL (right-to-left). Te ikony są całkowicie bezpłatne przy licencji Apache wersja 2.0.

Dodawanie ikon do wyników Autocomplete

W przykładzie napisana została funkcja sprawdzająca, czy wybrany rodzaj ikony znajdował się we własnościach types podpowiedzi Autocomplete. Jeśli typ miejsca zgadzał się z tym rodzajem, który miał być wyróżniony ikoną, łączono go z grafiką, która w najlepszy sposób odzwierciedlała dany typ miejsca. Aby odnaleźć ikonę, która odpowiadała danemu typowi miejsca, przejrzano bibliotekę Material Icons i użyto nazwy ikony do zreferowania się w kodzie. Domyślne ikony zostają przypisane do typów miejsca, dla których nie posiadano konkretnych ikon.

// 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);
    });
}

Powyższy kod pokazuje typy z przykładowego Autocomplete z Tokio, jednak możesz odnaleźć ikony pasujące do każdego istniejącego typu miejsc.

Aby zobaczyć więcej wskazówek Places API, kliknij tutaj, lub przeczytaj o Places SDKs dla JavaScript, Androida i iOS.

Artykuł źródłowy: https://cloud.google.com/blog/products/maps-platform/how-to-show-place-type-icons-in-place-autocomplete-results

Zobacz także:

ILE ZAPŁACĘ ZA GOOGLE MAPS? PRZEWODNIK PO CENNIKU DOBRE PRAKTYKI KORZYSTANIA Z GOOGLE MAPS: ZABEZPIECZENIE KLUCZY API SERIA GOOGLE MAPS PLATFORM NA YOUTUBE!