Elemente für „Place Details“

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

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.

Place Details-Element

Klicken Sie auf eine Markierung auf der Karte, um die Ortsdetails in einem Place Details-Element aufzurufen.

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

Inhalt konfigurieren

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

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

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. Es werden nur die von Ihnen angegebenen Inhaltselemente angezeigt. Geben Sie also gmp-place-name an, um den Namen des Ortes anzuzeigen.

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 die Quelle des Fotos anzuzeigen. 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 „Place Details“ verfügbaren Details anzuzeigen, oder gmp-place-standard-content, um eine Standardkonfiguration anzuzeigen. Beide Elemente enthalten den Namen des Ortes.

Darstellung konfigurieren

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

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

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>

Kompaktes Element „Place Details“

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

Mit PlaceDetailsCompactElement 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 PlaceDetailsCompactElement können Anzeigename, 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-place-details-compact so konfiguriert, dass orientation auf horizontal festgelegt ist. Mit dem zusätzlichen Attribut truncation-preferred werden bestimmte Inhalte gekürzt, damit sie in eine Zeile passen, anstatt umgebrochen zu werden. Das Element gmp-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-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>

Inhalt konfigurieren

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

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

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. Es werden nur die von Ihnen angegebenen Inhaltselemente angezeigt. Geben Sie also gmp-place-name an, um den Namen des Orts anzuzeigen. 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 „Place Details Compact“ verfügbaren Details anzuzeigen, oder gmp-place-standard-content , um eine Standardkonfiguration anzuzeigen. Beide Elemente enthalten den Namen des Ortes.

Darstellung konfigurieren

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

Der empfohlene Breitenbereich für das gmp-place-details-compact-Element in horizontaler Ausrichtung beträgt 180 px bis 500 px. 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-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 kompakte Element „Place Details“ einem Infofenster hinzugefügt wird, muss der benutzerdefinierte Stil direkt auf das gmp-place-details-compact-Element angewendet werden. Das liegt daran, dass das Infofenster Teil des Shadow-DOM der Karte ist und externe CSS-Stile daher nicht angewendet werden. 

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

Vollständiges Codebeispiel ansehen

In diesem Beispiel wird gezeigt, wie Sie einer Karte programmatisch ein PlaceDetailsCompactElement hinzufügen. Dazu werden ein InfoWindow und ein AdvancedMarkerElement verwendet.

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>