Elementy informacji o miejscu

Wybierz platformę: Android iOS JavaScript

Komponent Informacje o miejscu i komponent Informacje o miejscu w wersji kompaktowej to elementy HTML, które wyświetlają szczegółowe informacje o miejscu:

Element Informacje o miejscu

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

PlaceDetailsElement obsługuje szeroką gamę elementów treści, w tym pełne godziny otwarcia, stronę internetową, numer telefonu, podsumowanie oparte na AI z wersją zapasową w postaci podsumowania redakcyjnego, wyróżnienia dotyczące typu, opinie, podsumowanie opinii oparte na AI, kod plus i listy funkcji.

Aby wyświetlić informacje o miejscu na mapie, dodaj element gmp-place-details do elementu gmp-map na stronie HTML. Aby wybrać miejsce, dodaj element podrzędny gmp-place-details-place-request. Może to być obiekt miejsca, 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 miejsce wyświetlane przez element gmp-place-details, używając zagnieżdżonego elementu gmp-place-content-config do wybierania i konfigurowania szczegółów miejsca, jak pokazano w tym przykładzie: 

        <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>

Sam element gmp-place-content-config zawiera kilka elementów podrzędnych, a każdy z nich 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ą wygenerowane przez AI podsumowanie miejsca i jego opinii. Kolejność elementów podrzędnych nie ma znaczenia, ponieważ wybrane szczegóły są zawsze renderowane w ustalonej kolejności.

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. Lightbox jest domyślnie wyłączony.
  • 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 atrybucji w trybie jasnym i ciemnym.

Więcej informacji o wszystkich obsługiwanych elementach treści znajdziesz w dokumentacji referencyjnej PlaceContentConfigElement.

Dla uproszczenia element gmp-place-content-config można zastąpić elementem gmp-place-all-content , aby wyświetlić wszystkie szczegóły dostępne w elemencie Szczegóły miejsca, lub elementem gmp-place-standard-content , aby wyświetlić standardową konfigurację.

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 Szczegóły miejsca jest zaprojektowany tak, aby w razie potrzeby przewijać się w przydzielonym obszarze.

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 Places UI Kit Custom Styling.

Zobacz pełny przykład kodu

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 initMap() {
    // 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 && 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 =
                google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
            marker.style.display = 'block';
        }
    };
    // Set up map once widget is loaded.
    placeDetails.addEventListener('gmp-load', (event) => {
        updateMapAndMarker();
    });
    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', async (event) => {
        marker.position = null;
        event.stop();
        if (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';
        }
    });
}
initMap();
index.js

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;
}
style.css

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" defer></script>
        <!-- prettier-ignore -->
        <script>
      (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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});
    </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>
index.html

Wypróbuj

Kompaktowy element Informacje o miejscu

Kliknij znacznik na mapie, aby wyświetlić szczegóły miejsca w kompaktowym elemencie Szczegóły miejsca.

Element PlaceDetailsCompactElement wyświetla szczegóły wybranego miejsca, zajmując minimalną ilość miejsca. Może to być przydatne w oknie informacyjnym wyróżniającym miejsce na mapie, w usługach 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. 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, w zależności od wybranego atrybutu orientation.

W poniższym fragmencie gmp-place-details-compact jest skonfigurowany z ustawieniem orientation 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-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 miejsca, 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

Za pomocą zagnieżdżonego elementu gmp-place-content-config możesz wybrać i skonfigurować szczegóły miejsca, aby określić, jakie treści mają być wyświetlane w elemencie gmp-place-details-compact, jak pokazano w tym fragmencie kodu: 

<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>
index.html

Sam element gmp-place-content-config zawiera kilka elementów treści podrzędnej, a każdy z nich wybiera odpowiedni szczegół miejsca do wyświetlenia. Kolejność elementów podrzędnych nie ma znaczenia, ponieważ wybrane szczegóły są zawsze renderowane w ustalonej 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 PlaceContentConfigElement.

Dla uproszczenia element gmp-place-content-config można zastąpić elementem gmp-place-all-content , aby wyświetlić wszystkie szczegóły dostępne w kompaktowym elemencie Szczegóły miejsca, lub elementem gmp-place-standard-content , aby wyświetlić standardową konfigurację.

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ściach mniejszych 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 Places UI Kit Custom Styling.

Pamiętaj, że jeśli element Szczegóły miejsca w wersji kompaktowej zostanie dodany do okna informacyjnego, niestandardowe style muszą być stosowane bezpośrednio do elementu gmp-place-details-compact. Dzieje się tak, ponieważ okno informacyjne jest częścią DOM w cieniu mapy, więc zewnętrzne style CSS nie będą stosowane. 

<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>
index.html

Zobacz pełny przykład kodu

Ten przykład pokazuje, jak programowo dodać PlaceDetailsCompactElement do mapy 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 initMap() {
    // Request needed libraries.
    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 =
        google.maps.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', (event) => {
        // 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) {
            map.center = marker.position = placeDetails.place.location;
            showInfoWindow();
        }
    });
    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', async (event) => {
        event.stop();
        if (event.placeId) {
            // 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.');
        }
    });
}
initMap();
index.js

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;
}
style.css

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" defer></script>
        <!-- prettier-ignore -->
        <script>
      (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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});
    </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>
index.html

Wypróbuj