Wymagania dotyczące atrybucji w pakiecie UI do Miejsc

W tym artykule znajdziesz wymagania dotyczące atrybucji w przypadku zestawu interfejsu użytkownika Miejsca. Więcej informacji o warunkach dotyczących interfejsu użytkownika Places znajdziesz w Warunkach korzystania z Google Maps Platform.

Uwzględnione informacje o Mapach Google

Atrybucja Map Google jest zawarta w pakiecie interfejsu Places UI Kit.

  • Nie usuwaj informacji o pochodzeniu, niezależnie od tego, gdzie się wyświetlają. Nie zmieniaj, nie ukrywaj ani nie zasłaniaj informacji o źródle. Upewnij się, że są one dobrze widoczne na tle.
  • Zawsze wizualnie odróżniaj treści Google Maps Platform od innych treści, używając wskazówek interfejsu, takich jak obramowanie, kolor tła, cień lub wystarczająca ilość białego obszaru.
  • W przypadku modyfikacji wizualnych musisz przestrzegać wymagań dotyczących atrybucji Map Google. Szczegółowe informacje znajdziesz w sekcji poniżej.

W miarę możliwości należy użyć logo Map Google. W przypadku ograniczonej ilości miejsca dopuszczalny jest tekst Mapy Google. Użytkownicy muszą zawsze wyraźnie widzieć, które treści pochodzą z Map Google.

Lewo: atrybucja logo Map Google, prawo: atrybucja tekstowa Map Google
Lewo: logo Mapy Google, prawo: tekstowy atrybut Mapy Google

Atrybucja logo

Aby używać logo Map Google w swojej aplikacji lub witrynie, musisz spełnić te wymagania.
Dopuszczalne warianty atrybucji logo Map Google
Dopuszczalne warianty atrybucji logo Map Google

Pobieranie logo Map Google

Używaj oficjalnych plików logo Map Google. Pobierz logo poniżej i postępuj zgodnie z wytycznymi podanymi w tej sekcji.

Pobierz: google_logo_ui_kit.zip

Używając logo Map Google, postępuj zgodnie z tymi wytycznymi.

  • Nie zmieniaj logo w żaden sposób.
  • Zachowaj format obrazu logo, aby uniknąć zniekształcenia.
  • Użyj logo z obramowaniem na tle z wieloma elementami, np. na mapie lub obrazie.
  • Użyj logo bez obrysu na zwykłym tle, np. jednolitym kolorze lub subtelnym gradientem.

Specyfikacja rozmiaru logo

Logo Map Google musi mieć te wymiary:
  • Minimalna wysokość logo: 16 dp
  • Maksymalna wysokość logo: 19 dp
  • Minimalna odległość od logo: 10 dp po lewej, prawej i górze, 5 dp na dole

Więcej informacji o dp znajdziesz w artykule Gęstość pikseli na stronie Material Design.

Logo Map Google z minimalną ilością pustego miejsca i dopuszczalnym zakresem rozmiarów
Logo Map Google z minimalną odległością od krawędzi i dopuszczalnym zakresem rozmiarów

Dostępność logo

Logo Map Google musi spełniać te wymagania dotyczące ułatwień dostępu:
  • Upewnij się, że logo i tło mają dobry kontrast.
  • Dodaj etykietę ułatwień dostępu z tekstem Mapy Google.
Niedopuszczalne odmiany i problemy z dostępnością w przypadku logo Map Google
Niedopuszczalne warianty i problemy z ułatwieniami dostępu dotyczące atrybucji logo Map Google

Tekst źródła

Jeśli rozmiar interfejsu nie pozwala na użycie logo Map Google, możesz wpisać tekst Mapy Google. Skorzystaj z tych wskazówek:

Dopuszczalne warianty atrybucji tekstowej Map Google
Dopuszczalne warianty informacji o źródle dotyczącej Map Google
  • Nie modyfikuj tekstu Map Google w żaden sposób:
    • Nie zmieniaj wielkości liter w słowach Mapy Google.
    • Nie umieszczaj Map Google na kilku liniach.
    • Nie tłumacz Map Google na inny język.
    • Użyj atrybutu HTML translate="no", aby uniemożliwić przeglądarkom tłumaczenie Map Google.
Niedopuszczalne warianty informacji tekstowej o Mapach Google
Niedopuszczalne warianty informacji o źródle w Tekście Map Google
  • Ustaw styl tekstu w Mapach Google zgodnie z opisem w tej tabeli:

    Wymagania dotyczące stylizacji tekstu w Mapach Google
    Właściwość Styl
    Rodzina czcionek Roboto. Wczytywanie czcionki jest opcjonalne.
    Rodzina czcionek zastępczego dowolna czcionka bezszeryfowa używana w Twoim produkcie lub „Sans-Serif”, aby użyć domyślnej czcionki systemowej;
    Styl czcionki Normalny
    Grubość czcionki 400
    Kolor czcionki biały, czarny (#1F1F1F) lub szary (#5E5E5E); Zachowaj kontrast (4,5:1) względem tła.
    Rozmiar czcionki Minimalny rozmiar czcionki: 12 sp
    Maksymalny rozmiar czcionki: 16 sp
    Więcej informacji o sp znajdziesz w artykule Jednostki rozmiaru czcionki na stronie Material Design.
    Odstępy między literami Normalny

Przykładowy kod CSS

Ten kod CSS renderuje Mapy Google z odpowiednim stylem typograficznym i kolorami na białym lub jasnym tle.

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

.GMP-attribution {
font-family: Roboto, Sans-Serif;
font-style: normal;
font-weight: 400;
font-size: 1rem;
letter-spacing: normal;
white-space: nowrap;
color: #5e5e5e;
}

Wymagania dotyczące wyglądu

Przestrzegaj tych wymagań dotyczących wizualnego przedstawienia informacji o Mapach Google.
  • Umieść atrybucję u góry lub u dołu treści w tym samym kontenerze wizualnym. W przypadku pojedynczej linii treści atrybucję można umieścić po prawej lub lewej stronie.

  • wizualnie odróżniać treści z Google Maps Platform od innych treści za pomocą wskazówek UI, takich jak obramowanie, kolor tła, cień lub wystarczająca ilość pustej przestrzeni;

  • Nie przedstawiaj Map Google w nieprawdziwy sposób, przypisując im treści, które nie pochodzą z Google Maps Platform.
  • Zadbaj o to, aby atrybucja była zawsze widoczna i czytelna. Nigdy nie usuwaj, nie ukrywaj, nie zasłaniaj ani nie modyfikuj znaku wodnego.

Na poniższych rysunkach znajdziesz przykłady tych wymagań wizualnych.

Przykład atrybucji Map Google umieszczonej u góry, u dołu i obok treści
Przykład powiązania z Mapami Google umieszczonego u góry, u dołu i obok treści

Przykład 3 podejść do odróżniania treści Map Google (oceny miejsca) od innych treści
Przykład 3 sposobów na odróżnienie treści Map Google (oceny miejsca) od innych treści

Nie zasłaniaj informacji o źródle w Mapach Google ani nie mieszaj ich z treściami z innych źródeł.
Nie zasłaniaj informacji o pochodzeniu danych z Map Google ani nie mieszaj ich z treściami z innych źródeł