Google verwendet KI-Technologie, um Inhalte in Ihre bevorzugte Sprache zu übersetzen. KI-Übersetzungen können Fehler enthalten.

Erweiterte „Place Details“-Elemente

Die Elemente „Advanced Place Details“ und „Advanced Place Details Compact“ sind HTML-Elemente, mit denen Details zu einem Ort gerendert werden:

Die AdvancedPlaceDetailsElement unterstützt alle visualisierbaren Ortsdaten und kann mehrere Fotos enthalten.
Das AdvancedPlaceDetailsCompactElement ist so konzipiert, dass es nur wenig Platz einnimmt und eine kurze Zusammenfassung der Informationen zu einem Ort enthält, z. B. Name, Adresse und Bewertung. Es kann auch ein einzelnes Foto enthalten.

Sowohl das Element „Advanced Place Details“ als auch das Element „Advanced Place Details Compact“ bieten dieselben erweiterten Funktionen, darunter das Anpassen von Aktionsschaltflächen, das Weglassen des Ortsnamens und das Filtern von Rezensionen und Medien.

Mit dem Anpassungstool können Sie sich ansehen, wie sich verschiedene Eigenschaften auf das Erscheinungsbild eines Place Details-Elements auswirken, und auf den Code in HTML/CSS, Kotlin/XML und Swift zugreifen.

Advanced Place Details-Element

Klicken Sie auf eine Markierung auf der Karte, um die Ortsdetails in einem Element für erweiterte Ortsdetails aufzurufen.

Der AdvancedPlaceDetailsElement unterstützt eine Vielzahl von Inhaltselementen, darunter vollständige Öffnungszeiten, Website, Telefonnummer, KI-basierte Zusammenfassung mit Fallback auf redaktionelle Zusammenfassung, typspezifische Highlights, Rezensionen, KI-basierte Rezensionszusammenfassung, Plus Code und Listen mit Funktionen.

Wenn Sie Ortsdetails auf einer Karte anzeigen möchten, fügen Sie dem gmp-map-Element auf der HTML-Seite ein gmp-advanced-place-details-Element hinzu. Fügen Sie ein untergeordnetes Element gmp-place-details-place-request hinzu, um den Ort auszuwählen. Das kann ein Place-Objekt, eine Orts-ID oder der Ressourcenname eines Orts sein:

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

Inhalt konfigurieren

Sie können die spezifischen Ortsinhalte, die vom gmp-advanced-place-details-Element angezeigt werden, steuern, indem Sie untergeordnete Elemente verschachteln, um die Ortsdetails auszuwählen und zu konfigurieren. Hier ein Beispiel:

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

Mit jedem untergeordneten Inhaltselement wird ein entsprechendes Ortsdetail ausgewählt, das angezeigt werden soll: gmp-place-address wählt die Adresse des Orts aus, gmp-place-price wählt die Preisstufe des Orts aus usw. Die Elemente gmp-place-summary und gmp-place-review-summary bieten eine KI-gestützte Zusammenfassung des Orts bzw. seiner Rezensionen. Die Reihenfolge der untergeordneten Elemente ist irrelevant, da die ausgewählten Details immer in einer festen vordefinierten Reihenfolge gerendert werden.

Einige dieser Elemente können mit inhaltsspezifischen Attributen weiter konfiguriert werden:

Das Element gmp-place-media wird verwendet, um ein einzelnes Foto anzuzeigen. Es enthält ein lightbox-preferred-Attribut, das das Foto beim Anklicken in einer Lightbox öffnet. Die Lightbox ist standardmäßig deaktiviert.
Das Element gmp-place-attribution wird verwendet, um übergreifende Konfigurationen für die Datenzuordnung der Google Maps-API anzuzeigen, z. B. die Quelle eines Fotos oder einer Rezension. Mit den Attributen light-scheme-color und dark-scheme-color wird die Farbe des Quellenangabetexts im hellen und dunklen Modus festgelegt.

Weitere Informationen zu allen unterstützten Inhaltselementen finden Sie in der Referenzdokumentation Inhalte des Place Widgets anpassen.

Der Einfachheit halber können Sie auch gmp-place-all-content verwenden, um alle im Element „Erweiterte Ortsdetails“ verfügbaren Details anzuzeigen, oder gmp-place-standard-content , um eine Standardkonfiguration anzuzeigen.

Darstellung konfigurieren

Die empfohlene Breite für das gmp-advanced-place-details-Element liegt zwischen 250 px und 400 px. Breiten unter 250 Pixel werden möglicherweise nicht richtig angezeigt. Legen Sie die Höhe entsprechend Ihrer Anwendung fest. Das Element „Erweiterte Ortsdetails“ ist so konzipiert, dass bei Bedarf innerhalb des zugewiesenen Bereichs gescrollt werden kann.

Das gmp-advanced-place-details-Element unterstützt auch eine Vielzahl von benutzerdefinierten CSS-Eigenschaften, mit denen sich die Farben und Schriftarten des Elements konfigurieren lassen. Weitere Informationen finden Sie unter Benutzerdefinierte Stile für das Places UI Kit.

Vollständiges Codebeispiel ansehen

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();index.ts

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();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"></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>index.html

Advanced Place Details Compact-Element

Klicken Sie auf eine Markierung auf der Karte, um die Ortsdetails in einem kompakten Element für erweiterte Ortsdetails aufzurufen.

Mit AdvancedPlaceDetailsCompactElement werden Details zu einem ausgewählten Ort auf minimalem Raum gerendert. Das kann nützlich sein, um einen Ort auf einer Karte in einem Infofenster hervorzuheben, in sozialen Medien, z. B. beim Teilen eines Standorts in einem Chat, als Vorschlag für die Auswahl des aktuellen Standorts oder in einem Medienartikel, um auf den Ort in Google Maps zu verweisen. In der AdvancedPlaceDetailsCompactElement können Name, Adresse, Bewertung, Typ, Preis, Symbol für Barrierefreiheit, Öffnungsstatus und ein einzelnes Foto angezeigt werden. Sie kann horizontal oder vertikal angezeigt werden, je nachdem, was im Attribut orientation ausgewählt ist.

Im folgenden Snippet ist gmp-advanced-place-details-compact so konfiguriert, dass orientation auf horizontal festgelegt ist. Mit dem zusätzlichen Attribut truncation-preferred werden bestimmte Inhalte abgeschnitten, damit sie in eine Zeile passen, anstatt umgebrochen zu werden. Das Element gmp-advanced-place-details-compact enthält ein untergeordnetes Element, gmp-place-details-place-request, um den Ort auszuwählen. Das kann ein Place-Objekt, eine Orts-ID oder der Ressourcenname eines Orts sein.

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

Inhalt konfigurieren

Sie können die spezifischen Ortsinhalte, die vom gmp-advanced-place-details-compact-Element angezeigt werden, steuern, indem Sie untergeordnete Elemente verschachteln, um die Ortsdetails auszuwählen und zu konfigurieren, wie in diesem Snippet gezeigt:

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

Jedes untergeordnete Inhaltselement wählt ein entsprechendes Ortsdetail aus, das angezeigt werden soll. Die Reihenfolge der untergeordneten Elemente ist irrelevant, da die ausgewählten Details immer in einer festen, vordefinierten Reihenfolge gerendert werden. Einige dieser Elemente können mit inhaltsspezifischen Attributen weiter konfiguriert werden.

Weitere Informationen zu allen unterstützten Inhaltselementen finden Sie in der Referenzdokumentation Inhalte des Place Widgets anpassen.

Der Einfachheit halber können Sie auch gmp-place-all-content verwenden, um alle im Element „Advanced Place Details Compact“ verfügbaren Details anzuzeigen, oder gmp-place-standard-content, um eine Standardkonfiguration anzuzeigen.

Darstellung konfigurieren

Der empfohlene Breitenbereich für das gmp-advanced-place-details-compact-Element im Hochformat beträgt 180 px bis 300 px. Breiten unter 160 Pixel werden möglicherweise nicht richtig angezeigt. Legen Sie keine feste Höhe fest.

Der empfohlene Breitenbereich für das gmp-advanced-place-details-compact-Element in horizontaler Ausrichtung beträgt 180 bis 500 Pixel. Breiten unter 160 Pixel werden möglicherweise nicht richtig angezeigt. Bei einer Breite von weniger als 350 Pixeln wird das Thumbnail nicht angezeigt. Legen Sie keine feste Höhe fest.

Das gmp-advanced-place-details-compact-Element unterstützt auch eine Vielzahl von benutzerdefinierten CSS-Eigenschaften, mit denen sich die Farben und Schriftarten des Elements konfigurieren lassen. Weitere Informationen finden Sie unter Benutzerdefinierte Stile für das Places UI Kit.

Wenn das Element „Advanced Place Details Compact“ einem Infofenster hinzugefügt wird, muss der benutzerdefinierte Stil direkt auf das Element gmp-advanced-place-details-compact angewendet werden. Das liegt daran, dass das Infofenster Teil des Shadow-DOM der Karte ist und externe CSS-Stile daher nicht angewendet werden.

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

Vollständiges Codebeispiel ansehen

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();index.ts

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();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"></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>index.html

Erweiterte Funktionen

Aktionsschaltflächen anpassen

Fügen Sie Aktionsschaltflächen als direkt untergeordnete Elemente der Komponente „Erweiterte Ortsdetails“ hinzu. Verwenden Sie <gmp-place-link> für Standardnavigationsverbindungen und geben Sie das Attribut action explizit an. Optional können Sie das Attribut slot angeben. Gültige vordefinierte Aktionen sind open-website, open-directions, open-map und call. Wenn das Attribut slot weggelassen wird, wird standardmäßig action-main verwendet.

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

Anforderungen an die visuelle Attribution

Wichtig:Du musst Endnutzern gegenüber klar angeben, wenn über einen benutzerdefinierten Aktionsbutton Nutzerinformationen an einen anderen Drittanbieter als Google weitergegeben werden. Weitere Informationen finden Sie unter Anforderungen an die visuelle Quellenangabe.

Lassen Sie den Ortsnamen weg.

Wenn Sie den Ortsnamen weglassen möchten, schließen Sie das Element <gmp-place-name> explizit aus Ihren benutzerdefinierten Inhalten aus.

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

Rezensionen und Medien filtern

In diesem Codebeispiel werden nur Medien und Rezensionen angezeigt, in denen „Kaffee“ erwähnt wird.

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

Sie können auch JavaScript verwenden, um die Gesamtzahl der Elemente abzurufen, die der angegebenen Suchanfrage entsprechen. Lesen Sie dazu die Attribute searchMediaCount und searchReviewsCount. Sie müssen auf das Ereignis gmp-load warten, bevor Sie auf diese Properties zugreifen können.

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);
});

Erweiterte „Place Details“-Elemente Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.

Advanced Place Details-Element

Inhalt konfigurieren

Darstellung konfigurieren

Vollständiges Codebeispiel ansehen

TypeScript

JavaScript

CSS

HTML

Advanced Place Details Compact-Element

Inhalt konfigurieren

Darstellung konfigurieren

Vollständiges Codebeispiel ansehen

TypeScript

JavaScript

CSS

HTML

Erweiterte Funktionen

Aktionsschaltflächen anpassen

Anforderungen an die visuelle Attribution

Lassen Sie den Ortsnamen weg.

Rezensionen und Medien filtern

Erweiterte „Place Details“-Elemente