Elementy informacji o miejscu

Element informacji o miejscu i element informacji o miejscu (kompaktowy) to elementy HTML, które renderują szczegóły miejsca:

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

Element informacji o miejscu

Kliknij znacznik na mapie, aby wyświetlić informacje o miejscu w elemencie Szczegóły miejsca.

PlaceDetailsElement obsługuje szeroki zakres elementów treści, w tym pełne godziny otwarcia, witrynę, numer telefonu, podsumowanie oparte na AI z możliwością zastąpienia podsumowaniem redakcyjnym, najważniejsze informacje dotyczące typu, opinie, podsumowanie opinii oparte na AI, plus code i listy funkcji.

Aby wyświetlać na mapie informacje o miejscu, dodaj element gmp-place-details do elementu gmp-map na stronie HTML. Dołącz element podrzędny gmp-place-details-place-request, aby wybrać miejsce. 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-place-details>
      <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

Konfigurowanie treści

Możesz kontrolować konkretne treści dotyczące miejsca wyświetlane przez element gmp-place-details, zagnieżdżając elementy podrzędne, aby wybrać i skonfigurować informacje o miejscu, jak pokazano w tym przykładzie: 

        <gmp-place-details>
            <gmp-place-details-place-request
                place="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-details>

Każdy element podrzędny wybiera odpowiednie informacje o miejscu do wyświetlenia: gmp-place-address wybiera adres miejsca, gmp-place-price wybiera poziom cen miejsca itd. Elementy gmp-place-summary i gmp-place-review-summary udostępniają podsumowanie miejsca i opinii o nim wygenerowane przez AI. Kolejność elementów podrzędnych nie ma znaczenia, ponieważ wybrane szczegóły są zawsze renderowane w stałej, wstępnie zdefiniowanej kolejności. Wyświetlane są tylko te elementy treści, które uwzględnisz, więc dodaj gmp-place-name, aby wyświetlić nazwę miejsca.

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

  • Element gmp-place-media służy do wyświetlania pojedynczego zdjęcia i zawiera atrybut lightbox-preferred, który po kliknięciu otwiera zdjęcie w lightboxie. Reklamy Lightbox są domyślnie wyłączone.
  • Element gmp-place-attribution służy do wyświetlania źródła zdjęcia. Atrybuty light-scheme-color i dark-scheme-color służą do ustawiania koloru tekstu informacji o pochodzeniu danych w trybie jasnym i ciemnym.

Więcej informacji o wszystkich obsługiwanych elementach treści znajdziesz w dokumentacji referencyjnej dotyczącej dostosowywania treści widżetu miejsca.

Dla uproszczenia możesz też użyć gmp-place-all-content, aby wyświetlić wszystkie szczegóły dostępne w elemencie Informacje o miejscu, lub gmp-place-standard-content, aby wyświetlić konfigurację standardową. Oba te elementy zawierają nazwę miejsca.

Konfigurowanie wyglądu

Zalecany zakres szerokości elementu gmp-place-details to 250–400 pikseli. Szerokości mniejsze niż 250 pikseli mogą nie wyświetlać się prawidłowo. Ustaw wysokość odpowiednią dla Twojej aplikacji. Element informacji o miejscu jest zaprojektowany tak, aby w razie potrzeby przewijać się w przydzielonym miejscu.

Element gmp-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 Niestandardowe style w Places UI Kit.

Zobacz pełny przykładowy kod

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details');
const placeDetailsRequest = document.querySelector(
    'gmp-place-details-place-request'
);
const marker = document.querySelector('gmp-advanced-marker');

async function init() {
    // Request needed libraries.
    await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);

    // Hide the map type control.
    map.innerMap.setOptions({ mapTypeControl: false });

    // Function to update map and marker based on place details
    const updateMapAndMarker = () => {
        if (placeDetails.place?.location) {
            map.innerMap.panTo(placeDetails.place.location);
            map.innerMap.setZoom(16); // Set zoom after panning if needed
            marker.position = placeDetails.place.location;
            marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL';
            marker.style.display = 'block';
        }
    };

    // Set up map once widget is loaded.
    placeDetails.addEventListener('gmp-load', () => {
        updateMapAndMarker();
    });

    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', (event) => {
        marker.position = null;
        event.stop();
        if ('placeId' in event && event.placeId) {
            // Fire when the user clicks a POI.
            placeDetailsRequest.place = event.placeId;
            updateMapAndMarker();
        } else {
            // Fire when the user clicks the map (not on a POI).
            console.log('No place was selected.');
            marker.style.display = 'none';
        }
    });
}

void init();

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

gmp-map {
    flex-grow: 1;
}

.ui-panel {
    width: 400px;
    margin-left: 20px;
    margin-top: 10px;
}

gmp-place-details {
    width: 100%;
    margin: 0;
    border: none;
}

HTML

<!doctype html>
<html>
    <head>
        <title>Place Details with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <div class="container">
            <!-- map-id is required to use advanced markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
            <gmp-map zoom="17" map-id="DEMO_MAP_ID">
                <gmp-advanced-marker></gmp-advanced-marker>
            </gmp-map>
            <div class="ui-panel">
                <gmp-place-details>
                    <gmp-place-details-place-request
                        place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
                    <gmp-place-content-config>
                        <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-content-config>
                </gmp-place-details>
            </div>
        </div>
    </body>
</html>

Element kompaktowy informacji o miejscu

Kliknij znacznik na mapie, aby wyświetlić informacje o miejscu w elemencie kompaktowym Informacje o miejscu.

PlaceDetailsCompactElement renderuje szczegóły wybranego miejsca, zajmując minimalną ilość 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 medialnym, aby odwołać się do miejsca w Mapach Google. PlaceDetailsCompactElement może wyświetlać nazwę, adres, ocenę, typ, cenę, ikonę ułatwień dostępu, stan otwarcia i jedno zdjęcie. Może być wyświetlany poziomo lub pionowo, zgodnie z wyborem w atrybucie orientation.

We fragmencie kodu poniżej parametr gmp-place-details-compact jest skonfigurowany z wartością orientation ustawioną na horizontal. Dodatkowy atrybut truncation-preferred skraca niektóre treści, aby zmieściły się w jednym wierszu, zamiast je zawijać. Element gmp-place-details-compact zawiera element podrzędny 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-place-details-compact orientation="horizontal" truncation-preferred>
    <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-all-content></gmp-place-all-content>
  </gmp-place-details-compact>

Konfigurowanie treści

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

<gmp-place-details-compact orientation="horizontal" truncation-preferred>
  <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
  <gmp-place-media lightbox-preferred></gmp-place-media>
  <gmp-place-name></gmp-place-name>
  <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-open-now-status></gmp-place-open-now-status>
  <gmp-place-attribution light-scheme-color="gray" dark-scheme-color="white"></gmp-place-attribution>
</gmp-place-details-compact>

Każdy element podrzędny treści wybiera odpowiednie informacje o miejscu do wyświetlenia. Kolejność elementów podrzędnych nie ma znaczenia, ponieważ wybrane szczegóły są zawsze renderowane w stałej, wstępnie zdefiniowanej kolejności. Wyświetlane są tylko te elementy treści, które uwzględnisz, więc dodaj gmp-place-name, aby wyświetlić nazwę miejsca. Niektóre z tych elementów można dodatkowo skonfigurować za pomocą atrybutów związanych z treścią.

Więcej informacji o wszystkich obsługiwanych elementach treści znajdziesz w dokumentacji referencyjnej dotyczącej dostosowywania treści widżetu miejsca.

Dla uproszczenia możesz też użyć gmp-place-all-content, aby wyświetlić wszystkie szczegóły dostępne w elemencie informacje o miejscu (kompaktowe), lub gmp-place-standard-content, aby wyświetlić konfigurację standardową. Oba te elementy zawierają nazwę miejsca.

Konfigurowanie wyglądu

Zalecany zakres szerokości elementu gmp-place-details-compact w orientacji pionowej to 180–300 pikseli. Szerokości mniejsze niż 160 pikseli mogą nie wyświetlać się prawidłowo. Nie ustawiaj stałej wysokości.

Zalecany zakres szerokości elementu gmp-place-details-compact w orientacji poziomej to 180–500 pikseli. Szerokości mniejsze niż 160 pikseli mogą nie wyświetlać się prawidłowo. Przy szerokości mniejszej niż 350 pikseli miniatura nie będzie wyświetlana. Nie ustawiaj stałej wysokości.

Element gmp-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 Niestandardowe style w Places UI Kit.

Pamiętaj, że jeśli element Place Details Compact zostanie dodany do okna informacyjnego, niestandardowy styl musi zostać zastosowany bezpośrednio do elementu gmp-place-details-compact. Dzieje się tak, ponieważ okno informacyjne jest częścią shadow DOM mapy, więc zewnętrzne style CSS nie zostaną zastosowane. 

<gmp-place-details-compact
    orientation="horizontal"
    truncation-preferred
    style="
        width: 400px;
        padding: 0;
        margin: 0;
        border: none;
        background-color: transparent;
        color-scheme: light;
    ">
    <gmp-place-details-place-request
        place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>

Zobacz pełny przykład kodu

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

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details-compact');
const placeDetailsRequest = document.querySelector(
    'gmp-place-details-place-request'
);
const marker = document.querySelector('gmp-advanced-marker');
async function init() {
    // Request needed libraries.
    void Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);
    const { InfoWindow } = await google.maps.importLibrary('maps');

    await window.customElements.whenDefined('gmp-map');
    // Set the inner map options.
    map.innerMap.setOptions({
        mapTypeControl: false,
        streetViewControl: false,
    });

    await window.customElements.whenDefined('gmp-advanced-marker');
    marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL';

    const infoWindow = new InfoWindow();
    infoWindow.addListener('close', () => {
        marker.position = null;
    });

    const showInfoWindow = () => {
        if (infoWindow.isOpen) return;
        infoWindow.setContent(placeDetails);
        infoWindow.open({ anchor: marker });
    };

    placeDetails.addEventListener('gmp-load', () => {
        // For the initial load case, with no user click, we fall back to the place's location, and ensure the map has a center set and the InfoWindow is show.
        // (The clicked POI LatLng will be a more natural marker position, when available.)
        if (!map.center && placeDetails.place?.location) {
            map.center = marker.position = placeDetails.place.location;
            showInfoWindow();
        }
    });

    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', (event) => {
        event.stop();

        if ('placeId' in event) {
            // When the user clicks a POI.
            marker.position = event.latLng;
            placeDetailsRequest.place = event.placeId;
            showInfoWindow();
        } else {
            // When the user clicks the map (not on a POI).
            marker.position = null;
            placeDetailsRequest.place = null;
            console.log('No place was selected.');
        }
    });
}
void init();

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

gmp-map {
    flex-grow: 1;
}

HTML

<!doctype html>
<html>
    <head>
        <title>Place Details Compact with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <div class="container">
            <!-- map-id is required to use Advanced Markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
            <gmp-map zoom="17" map-id="DEMO_MAP_ID">
                <gmp-advanced-marker></gmp-advanced-marker>
            </gmp-map>
        </div>
        <!--
        The gmp-place-details-compact element is styled inline because it is
        conditionally rendered and moved into the info window, which is
        part of the map's shadow DOM.
        -->
        <gmp-place-details-compact
            orientation="horizontal"
            truncation-preferred
            style="
                width: 400px;
                padding: 0;
                margin: 0;
                border: none;
                background-color: transparent;
                color-scheme: light;
            ">
            <gmp-place-details-place-request
                place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
            <gmp-place-content-config>
                <gmp-place-media lightbox-preferred></gmp-place-media>
                <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-open-now-status></gmp-place-open-now-status>
                <gmp-place-attribution
                    light-scheme-color="gray"
                    dark-scheme-color="white"></gmp-place-attribution>
            </gmp-place-content-config>
        </gmp-place-details-compact>
    </body>
</html>