Element szczegółowych informacji o miejscu w wersji zaawansowanej i element szczegółowych informacji o miejscu w wersji kompaktowej to elementy HTML, które renderują szczegółowe informacje o miejscu:
-
AdvancedPlaceDetailsElementobsługuje wszystkie wizualizowalne dane o miejscach i może zawierać wiele zdjęć. -
AdvancedPlaceDetailsCompactElementzajmuje minimalną ilość miejsca i wyświetla zwięzły zestaw informacji o miejscu, w tym nazwę, adres, ocenę itp. Może też zawierać jedno zdjęcie.
Zarówno element Szczegółowe informacje o miejscu, jak i element Szczegółowe informacje o miejscu (kompaktowy) oferują te same funkcje zaawansowane, w tym dostosowywanie przycisków poleceń, 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 informacji o miejscu, i uzyskać dostęp do kodu w językach HTML/CSS, Kotlin/XML i Swift.
Element zaawansowanych informacji o miejscu
Kliknij znacznik na mapie, aby wyświetlić informacje o miejscu w zaawansowanym elemencie szczegółów miejsca.
AdvancedPlaceDetailsElement obsługuje szeroki zakres elementów treści, w tym pełne godziny otwarcia, popularne godziny, 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-advanced-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 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 dotyczące miejsca wyświetlane przez element gmp-advanced-place-details, zagnieżdżając elementy podrzędne, aby wybrać i skonfigurować informacje o miejscu, jak 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-popular-times></gmp-place-popular-times>
<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 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 jego opinii oparte na AI. Kolejność elementów podrzędnych nie ma znaczenia, ponieważ wybrane szczegóły są zawsze renderowane w stałej, wstępnie zdefiniowanej kolejności.
Niektóre z tych elementów można dodatkowo skonfigurować za pomocą atrybutów związanych z treścią:
-
Element
gmp-place-mediasłuży do wyświetlania pojedynczego zdjęcia i zawiera atrybutlightbox-preferred, który po kliknięciu otwiera zdjęcie w lightboxie. Domyślnie Lightbox jest wyłączony. -
Element
gmp-place-attributionsłuży do wyświetlania nadrzędnych konfiguracji informacji o pochodzeniu danych interfejsu API Map Google, takich jak źródło zdjęcia lub opinii. Atrybutylight-scheme-coloridark-scheme-colorsłużą do ustawiania koloru tekstu informacji o pochodzeniu danych w trybie jasnym i trybie ciemnym.
Więcej informacji o wszystkich obsługiwanych elementach treści znajdziesz w dokumentacji referencyjnej dotyczącej dostosowywania treści widżetu miejsc.
Dla uproszczenia możesz też użyć gmp-place-all-content, aby wyświetlić wszystkie szczegóły dostępne w elemencie Zaawansowane informacje o miejscu, lub gmp-place-standard-content, aby wyświetlić konfigurację standardową.
Popularne godziny
Element gmp-place-popular-times wyświetla informacje o popularnych godzinach i zatłoczeniu na karcie Przegląd pod godzinami otwarcia:
- Interaktywny histogram zatłoczenia w poszczególnych godzinach dla każdego dnia tygodnia, domyślnie ustawiony na bieżący dzień lokalny miejsca.
- Aktualny stan zatłoczenia (zatłoczenie na żywo, jeśli jest dostępne, np. „Na żywo: bardziej zatłoczone niż zwykle”, lub typowe zatłoczenie historyczne) i typowy czas oczekiwania w bieżącej godzinie.
- Maksymalny czas oczekiwania w wybranym dniu (jeśli jest dostępny).
Popularne godziny są uwzględniane automatycznie, gdy używasz właściwości gmp-place-all-content lub gmp-place-standard-content w elemencie gmp-advanced-place-details. Możesz też uwzględnić właściwość gmp-place-popular-times jako bezpośredni element podrzędny elementu gmp-advanced-place-details. Element gmp-place-popular-times jest obsługiwany tylko w pełnych wersjach AdvancedPlaceDetailsElement i PlaceDetailsElement (nie w AdvancedPlaceDetailsCompactElement ani PlaceDetailsCompactElement).
Nie wszystkie miejsca mają dane o popularnych godzinach. Jeśli dane o popularnych godzinach są niedostępne dla danego miejsca, sekcja zostanie pominięta bez błędu. Aby sprawdzić, czy dane o popularnych godzinach zostały wyrenderowane, użyj właściwości tylko do odczytu rendered elementu PlacePopularTimesElement po wywołaniu zdarzenia gmp-load przez element nadrzędny:
const detailsElement = document.querySelector('gmp-advanced-place-details'); const popularTimesElement = detailsElement.querySelector('gmp-place-popular-times'); detailsElement.addEventListener('gmp-load', () => { console.log('Popular times rendered:', popularTimesElement.rendered); });
Możesz dostosować kolory słupków histogramu popularnych godzin i wskaźnika natężenia ruchu na żywo, używając właściwości CSS --gmp-popular-times-bar-color, --gmp-popular-times-bar-current-hour-color i --gmp-popular-times-bar-current-hour-live-color. Szczegółowe informacje znajdziesz w artykule Niestandardowe style w Places UI Kit.
Konfigurowanie wyglądu
Zalecany zakres szerokości elementu gmp-advanced-place-details to 250–400 pikseli. Szerokość mniejsza niż 250 pikseli może nie wyświetlać się prawidłowo. Ustaw wysokość odpowiednią dla Twojej aplikacji. Element Zaawansowane informacje o miejscu jest zaprojektowany tak, aby w razie potrzeby można było go przewijać 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 Niestandardowe style w Places UI Kit.
Zobacz pełny przykładowy kod
TypeScript
// Use querySelector to select elements for interaction. const map = document.querySelector<google.maps.MapElement>('gmp-map')!; const placeDetails = document.querySelector< HTMLElement & { place?: google.maps.places.Place } >('gmp-advanced-place-details')!; const placeDetailsRequest = document.querySelector<HTMLElement>( 'gmp-place-details-place-request' )!; const marker = document.querySelector<google.maps.marker.AdvancedMarkerElement>( 'gmp-advanced-marker' )!; async function init(): Promise<void> { // 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: google.maps.MapMouseEvent | google.maps.IconMouseEvent) => { marker.position = null; event.stop(); if ('placeId' in event && event.placeId) { // Fire when the user clicks a POI. placeDetailsRequest.setAttribute( 'place', `places/${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();
JavaScript
// Use querySelector to select elements for interaction. const map = document.querySelector('gmp-map'); const placeDetails = document.querySelector('gmp-advanced-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.setAttribute( 'place', `places/${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",
v: "beta"
});
</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-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-advanced-place-details>
</div>
</div>
</body>
</html>Skorzystaj z przykładu
Element kompaktowy ze szczegółowymi informacjami o miejscu
Kliknij znacznik na mapie, aby wyświetlić informacje o miejscu w elemencie kompaktowym zaawansowanych informacji o miejscu.
AdvancedPlaceDetailsCompactElement 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. AdvancedPlaceDetailsCompactElement 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-advanced-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-advanced-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-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 dotyczące informacji o miejscu wyświetlane przez element gmp-advanced-place-details-compact, zagnieżdżając elementy podrzędne, aby wybrać i skonfigurować informacje o miejscu, 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 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. 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 miejsc.
Dla uproszczenia możesz też użyć gmp-place-all-content, aby wyświetlić wszystkie dostępne informacje o miejscu w elemencie Advanced Place Details Compact, lub gmp-place-standard-content, aby wyświetlić konfigurację standardową.
Konfigurowanie wyglądu
Zalecany zakres szerokości elementu gmp-advanced-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-advanced-place-details-compact w orientacji poziomej to 180–500 pikseli. Szerokości mniejsze niż 160 pikseli mogą nie wyświetlać się prawidłowo. Jeśli szerokość jest mniejsza 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 Niestandardowe style w Places UI Kit.
Pamiętaj, że jeśli element Advanced Place Details Compact zostanie dodany do okna informacyjnego, niestandardowy styl musi zostać zastosowany bezpośrednio do elementu gmp-advanced-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-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; }
Zobacz pełny przykładowy kod
TypeScript
// Use querySelector to select elements for interaction. const map = document.querySelector<google.maps.MapElement>('gmp-map')!; const placeDetails = document.querySelector< HTMLElement & { place?: google.maps.places.Place } >('gmp-advanced-place-details-compact')!; const placeDetailsRequest = document.querySelector<HTMLElement>( 'gmp-place-details-place-request' )!; const marker = document.querySelector<google.maps.marker.AdvancedMarkerElement>( 'gmp-advanced-marker' )!; async function init(): Promise<void> { // 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: google.maps.MapMouseEvent | google.maps.IconMouseEvent) => { event.stop(); if ('placeId' in event && event.placeId) { // When the user clicks a POI. marker.position = event.latLng; placeDetailsRequest.setAttribute( 'place', `places/${event.placeId}` ); showInfoWindow(); } else { // When the user clicks the map (not on a POI). marker.position = null; placeDetailsRequest.removeAttribute('place'); console.log('No place was selected.'); } } ); } void init();
JavaScript
// Use querySelector to select elements for interaction. const map = document.querySelector('gmp-map'); const placeDetails = document.querySelector( 'gmp-advanced-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 && event.placeId) { // When the user clicks a POI. marker.position = event.latLng; placeDetailsRequest.setAttribute( 'place', `places/${event.placeId}` ); showInfoWindow(); } else { // When the user clicks the map (not on a POI). marker.position = null; placeDetailsRequest.removeAttribute('place'); 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",
v: "beta"
});
</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-advanced-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-advanced-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="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
<gmp-place-name></gmp-place-name>
<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-advanced-place-details-compact>
</body>
</html>Skorzystaj z przykładu
Funkcje zaawansowane
Dostosowywanie przycisków poleceń
Dodaj przyciski poleceń jako bezpośrednie elementy podrzędne komponentu Szczegółowe informacje o miejscu. Używaj <gmp-place-link> w przypadku standardowych połączeń nawigacyjnych i jawnie określaj atrybut action. Możesz też opcjonalnie określić atrybut slot.
Prawidłowe wstępnie zdefiniowane działania to open-website, open-directions, open-map i call.
Jeśli atrybut slot zostanie pominięty, domyślnie zostanie użyta 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 podania źródła wizualnego
Ważne: musisz wyraźnie poinformować użytkowników, kiedy przycisk działania niestandardowego udostępni informacje o użytkowniku firmie innej niż Google. Zobacz wymagania dotyczące podania źródła.
pominąć nazwę 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, które zawierają 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.
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); });