Zaawansowane elementy informacji o miejscu (wersja testowa)

Element Zaawansowane informacje o miejscu i element Zaawansowane informacje o miejscu – kompaktowy Element to elementy HTML, które wyświetlają szczegóły miejsca:

Zarówno element Zaawansowane informacje o miejscu, jak i element Zaawansowane informacje o miejscu – kompaktowy oferują te same funkcje zaawansowane, w tym dostosowywanie przycisków działania, pomijanie nazwy miejsca oraz filtrowanie opinii i multimediów.

Użyj narzędzia do dostosowywania , aby zobaczyć, jak różne zestawy właściwości wpłyną na wygląd elementu Informacje o miejscu, i uzyskać dostęp do kodu w HTML/CSS, Kotlin/XML, i Swift.

Element Zaawansowane informacje o miejscu (wersja testowa)

Kliknij znacznik na mapie, aby zobaczyć szczegóły miejsca w elemencie Zaawansowane informacje o miejscu.

AdvancedPlaceDetailsElement obsługuje szeroki zakres elementów treści, w tym pełne godziny otwarcia, adres strony internetowej, numer telefonu, podsumowanie wygenerowane przez AI z możliwością powrotu do podsumowania redakcyjnego, wyróżnione informacje dotyczące typu miejsca, opinie, podsumowanie opinii wygenerowane przez AI, kod plus i listy funkcji.

Aby wyświetlić szczegóły miejsca na mapie, dodaj gmp-advanced-place-details element do gmp-map elementu na stronie HTML. Aby wybrać miejsce, dodaj element podrzędny gmp-place-details-place-request. Może to być obiekt Place, identyfikator miejsca lub nazwa zasobu miejsca: 

<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
  <div class="widget-container" slot="control-inline-start-block-start">
    <gmp-advanced-place-details>
      <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-all-content></gmp-place-all-content>
    </gmp-advanced-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

Konfigurowanie treści

Możesz kontrolować konkretne treści miejsca wyświetlane przez element gmp-advanced-place-details przez zagnieżdżanie elementów podrzędnych aby wybrać i skonfigurować szczegóły miejsca, jak pokazano w tym przykładzie: 

        <gmp-advanced-place-details>
            <gmp-place-details-place-request
                place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
                <gmp-place-name></gmp-place-name>
                <gmp-place-address></gmp-place-address>
                <gmp-place-rating></gmp-place-rating>
                <gmp-place-type></gmp-place-type>
                <gmp-place-price></gmp-place-price>
                <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
                <gmp-place-opening-hours></gmp-place-opening-hours>
                <gmp-place-website></gmp-place-website>
                <gmp-place-phone-number></gmp-place-phone-number>
                <gmp-place-summary></gmp-place-summary>
                <gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
                <gmp-place-review-summary></gmp-place-review-summary>
                <gmp-place-reviews></gmp-place-reviews>
                <gmp-place-feature-list></gmp-place-feature-list>
                <gmp-place-attribution></gmp-place-attribution>
        </gmp-advanced-place-details>

Każdy element podrzędny treści wybiera odpowiednie szczegóły miejsca do wyświetlenia: gmp-place-address wybiera adres miejsca, gmp-place-price wybiera poziom cen miejsca itp. Elementy gmp-place-summary i gmp-place-review-summary zawierają podsumowanie miejsca i jego opinii wygenerowane przez AI. Kolejność elementów podrzędnych nie ma znaczenia, ponieważ wybrane szczegóły są zawsze renderowane w stałej, predefiniowanej kolejności.

Niektóre z tych elementów można dodatkowo skonfigurować za pomocą atrybutów specyficznych dla treści:

  • Element gmp-place-media służy do wyświetlania pojedynczego zdjęcia i zawiera lightbox-preferred atrybut, który po kliknięciu otwiera zdjęcie w lightboxie. Lightbox jest domyślnie wyłączony.
  • Element gmp-place-attribution służy do wyświetlania ogólnych konfiguracji informacji o pochodzeniu danych interfejsu API Map Google, takich jak źródło zdjęcia lub opinii. Atrybuty light-scheme-color i dark-scheme-color służą do ustawiania koloru informacji o pochodzeniu danych w trybie jasnym i ciemnym.

Więcej informacji o wszystkich obsługiwanych elementach treści znajdziesz w dokumentacji referencyjnej Dostosowywanie treści widżetu Miejsca.

Aby uprościć, możesz też użyć gmp-place-all-content aby wyświetlić wszystkie szczegóły dostępne w elemencie Zaawansowane informacje o miejscu, lub z gmp-place-standard-content aby wyświetlić standardową konfigurację.

Konfigurowanie wyglądu

Zalecany zakres szerokości elementu gmp-advanced-place-details to 250–400 pikseli. Szerokość mniejsza niż 250 pikseli może powodować nieprawidłowe wyświetlanie. Ustaw wysokość odpowiednią dla swojej aplikacji. Element Zaawansowane informacje o miejscu został zaprojektowany tak, aby w razie potrzeby przewijać się w przydzielonym miejscu.

Element gmp-advanced-place-details obsługuje też różne niestandardowe właściwości CSS, które umożliwiają konfigurowanie kolorów i czcionek elementu. Więcej informacji znajdziesz w artykule Dostosowywanie stylu pakietu Places UI Kit.

Element Zaawansowane informacje o miejscu – kompaktowy (wersja testowa)

Kliknij znacznik na mapie, aby zobaczyć szczegóły miejsca w elemencie Zaawansowane informacje o miejscu – kompaktowy.

AdvancedPlaceDetailsCompactElement renderuje szczegóły wybranego miejsca, zajmując jak najmniej miejsca. Może to być przydatne w oknie informacyjnym wyróżniającym miejsce na mapie, w mediach społecznościowych np. podczas udostępniania lokalizacji na czacie, jako sugestia wyboru bieżącej lokalizacji lub w artykule w mediach, aby odwołać się do miejsca w Mapach Google. Element AdvancedPlaceDetailsCompactElement może wyświetlać nazwę, adres, ocenę, typ, cenę, ikonę dostępności, stan otwarcia i jedno zdjęcie. Może być wyświetlany poziomo lub pionowo, w zależności od wartości atrybutu orientation.

W tym fragmencie kodu element gmp-advanced-place-details-compact jest skonfigurowany z atrybutem orientation ustawionym na horizontal. Dodatkowy atrybut truncation-preferred powoduje obcięcie niektórych treści, aby zmieściły się w jednym wierszu zamiast zawijać. Element gmp-advanced-place-details-compact zawiera element podrzędny element, gmp-place-details-place-request, który służy do wybierania miejsca. Może to być obiekt Place, identyfikator miejsca lub nazwa zasobu miejsca. 

  <gmp-advanced-place-details-compact orientation="horizontal" truncation-preferred>
    <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-all-content></gmp-place-all-content>
  </gmp-advanced-place-details-compact>

Konfigurowanie treści

Możesz kontrolować konkretne treści miejsca wyświetlane przez element gmp-advanced-place-details-compact, zagnieżdżając elementy podrzędne , aby wybrać i skonfigurować szczegóły miejsca, jak pokazano w tym fragmencie kodu: 

<gmp-advanced-place-details-compact>
  <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-photo></gmp-place-photo>
    <gmp-place-name></gmp-place-name>
    <gmp-place-rating></gmp-place-rating>
    <gmp-place-address></gmp-place-address>
    <gmp-place-opening-hours></gmp-place-opening-hours>
    <gmp-place-attribution></gmp-place-attribution>
</gmp-advanced-place-details-compact>

Każdy element podrzędny treści wybiera odpowiednie szczegóły miejsca do wyświetlenia. Kolejność elementów podrzędnych nie ma znaczenia, ponieważ wybrane szczegóły są zawsze renderowane w stałej, predefiniowanej kolejności. Niektóre z tych elementów można dodatkowo skonfigurować za pomocą atrybutów specyficznych dla treści.

Więcej informacji o wszystkich obsługiwanych elementach treści znajdziesz w dokumentacji referencyjnej Dostosowywanie treści widżetu Miejsca.

Aby uprościć, możesz też użyć gmp-place-all-content , aby wyświetlić wszystkie szczegóły dostępne w elemencie Zaawansowane informacje o miejscu – kompaktowy , lub z gmp-place-standard-content , aby wyświetlić standardową konfigurację.

Konfigurowanie wyglądu

Zalecany zakres szerokości elementu gmp-advanced-place-details-compact w orientacji pionowej to 180–300 pikseli. Szerokość mniejsza niż 160 pikseli może powodować nieprawidłowe wyświetlanie. Nie ustawiaj stałej wysokości.

Zalecany zakres szerokości elementu gmp-advanced-place-details-compact w orientacji poziomej to 180–500 pikseli. Szerokość mniejsza niż 160 pikseli może powodować nieprawidłowe wyświetlanie. Przy szerokości mniejszej niż 350 pikseli miniatura nie będzie wyświetlana. Nie ustawiaj stałej wysokości.

Element gmp-advanced-place-details-compact obsługuje też różne niestandardowe właściwości CSS, które umożliwiają konfigurowanie kolorów i czcionek elementu. Więcej informacji znajdziesz w artykule Dostosowywanie stylu pakietu Places UI Kit.

Pamiętaj, że jeśli element Zaawansowane informacje o miejscu – kompaktowy zostanie dodany do dymku informacyjnego, niestandardowy styl należy zastosować bezpośrednio do gmp-advanced-place-details-compact elementu. Dzieje się tak, ponieważ okno informacyjne jest częścią DOM cienia mapy, więc zewnętrzne style CSS nie będą stosowane. 

gmp-advanced-place-details-compact {
  --gmp-color-surface: #202124;
  --gmp-color-on-surface: #ffffff;
  --gmp-color-on-surface-variant: #9aa0a6;
  --gmp-color-primary: #8ab4f8;
  --gmp-font-family: "Roboto", sans-serif;
}

Ten przykład pokazuje, jak programowo dodać element AdvancedPlaceDetailsCompactElement do mapy za pomocą elementu InfoWindow i elementu AdvancedMarkerElement.

Funkcje zaawansowane

Dostosowywanie przycisków działania

Dodaj przyciski działania jako bezpośrednie elementy podrzędne komponentu Zaawansowane informacje o miejscu komponent. W przypadku standardowych połączeń nawigacyjnych użyj elementu <gmp-place-link> i wyraźnie określ atrybut action. Opcjonalnie możesz określić atrybut slot. Prawidłowe predefiniowane działania to open-website, open-directions, open-map i call. Jeśli atrybut slot zostanie pominięty, domyślnie przyjmie wartość action-main. 

<gmp-advanced-place-details-compact orientation="vertical" truncation-preferred>
  <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
  <!-- Other content items -->
  <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
  <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
</gmp-advanced-place-details-compact>

Wymagania dotyczące atrybucji wizualnej

Ważne: musisz wyraźnie poinformować użytkowników, kiedy niestandardowy przycisk działania będzie udostępniać informacje o użytkowniku podmiotowi zewnętrznemu innemu niż Google. Zobacz wymagania dotyczące atrybucji wizualnej.

Pomijanie nazwy miejsca

Aby pominąć nazwę miejsca, wyraźnie wyklucz element <gmp-place-name> z treści niestandardowych. 

<gmp-advanced-place-details>
  <gmp-place-details-place-request place="places/ChIJT7FdmYiAhYAROFOvrIxRJDU"></gmp-place-details-place-request>
  <!-- Exclude <gmp-place-name> to hide the place name -->
  <gmp-place-rating></gmp-place-rating>
  <gmp-place-address></gmp-place-address>
</gmp-advanced-place-details>

Filtrowanie opinii i multimediów

Ten przykładowy kod pokazuje tylko multimedia i opinie, w których pojawia się słowo „kawa”.

<gmp-advanced-place-details>
  <gmp-place-details-place-request place="places/ChIJT7FdmYiAhYAROFOvrIxRJDU"></gmp-place-details-place-request>
  <gmp-place-media query="coffee"></gmp-place-media>
  <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
</gmp-advanced-place-details>

Możesz też użyć JavaScriptu, aby pobrać łączną liczbę elementów pasujących do danego zapytania, odczytując właściwości searchMediaCount i searchReviewsCount. Zanim uzyskasz dostęp do tych właściwości, musisz poczekać na zdarzenie gmp-load przed. 

const detailsElement = document.querySelector('gmp-advanced-place-details');
const mediaElement = detailsElement.querySelector('gmp-place-media');
mediaElement.addEventListener('gmp-load', (e) => {
  console.log('Total matching photos: ', e.target.searchMediaCount);
});

const reviewsElement = detailsElement.querySelector('gmp-place-reviews');
reviewsElement.addEventListener('gmp-load', (e) => {
  console.log('Total matching reviews: ', e.target.searchReviewsCount);
});