Elemente für „Place Details“

Plattform auswählen: Android iOS JavaScript

Das „Place Details“-Element und das kompakte „Place Details“-Element sind HTML-Elemente, mit denen Details zu einem Ort gerendert werden:

„Place Details“-Element

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

Die 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 Funktionslisten.

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

Inhalte konfigurieren

Sie können die spezifischen Ortsinhalte, die vom gmp-place-details-Element angezeigt werden, mit einem verschachtelten gmp-place-content-config-Element auswählen und konfigurieren, wie in diesem Beispiel gezeigt: 

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

Das gmp-place-content-config-Element selbst enthält eine Reihe untergeordneter Inhaltselemente, die jeweils ein entsprechendes Ortsdetail zum Anzeigen auswählen: 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-basierte 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, mit dem das Foto bei einem Klick in einem Lightbox-Fenster geöffnet wird. 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 Attributions-Texts im hellen und dunklen Modus festgelegt.

Weitere Informationen zu allen unterstützten Inhaltselementen finden Sie in der Referenzdokumentation zu PlaceContentConfigElement.

Zur Vereinfachung kann das Element gmp-place-content-config durch gmp-place-all-content ersetzt werden, um alle im Element „Ortsdetails“ verfügbaren Details anzuzeigen, oder durch gmp-place-standard-content, um eine Standardkonfiguration zu verwenden.

Darstellung konfigurieren

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

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 Benutzerdefiniertes Styling des 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 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

Testbeispiel

Kompaktes Element „Place Details“

Klicken Sie auf eine Markierung auf der Karte, um die zugehörigen Ortsdetails in einem kompakten Element aufzurufen.

Mit PlaceDetailsCompactElement werden Details für einen ausgewählten Ort auf minimalem Raum gerendert. Das kann beispielsweise in einem Infofenster nützlich sein, in dem ein Ort auf einer Karte hervorgehoben wird, in einem sozialen Medium wie dem Teilen eines Standorts in einem Chat, als Vorschlag für die Auswahl Ihres aktuellen Standorts oder in einem Medienartikel, um auf den Ort in Google Maps zu verweisen. Die PlaceDetailsCompactElement kann den Anzeigenamen, die Adresse, die Bewertung, den Typ, den Preis, das Symbol für Barrierefreiheit, den Öffnungsstatus und ein einzelnes Foto enthalten. Sie kann horizontal oder vertikal angezeigt werden, je nach Auswahl im Attribut orientation.

Im folgenden Snippet ist gmp-place-details-compact mit orientation auf horizontal konfiguriert. Mit dem zusätzlichen Attribut truncation-preferred wird bestimmter Inhalt gekürzt, damit er in eine Zeile passt, anstatt umgebrochen zu werden. Das Element gmp-place-details-compact enthält ein untergeordnetes Element, gmp-place-details-place-request, zum Auswählen des Orts. 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>

Inhalte konfigurieren

Sie können die spezifischen Ortsinhalte, die vom gmp-place-details-compact-Element angezeigt werden, mit einem verschachtelten gmp-place-content-config-Element auswählen und konfigurieren, wie in diesem Snippet gezeigt: 

<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

Das gmp-place-content-config-Element selbst enthält eine Reihe untergeordneter Inhaltselemente, die jeweils ein entsprechendes Ortsdetail zum Anzeigen auswählen. Die Reihenfolge der untergeordneten Elemente ist irrelevant, da die ausgewählten Details immer in einer festen vordefinierten Reihenfolge gerendert werden. Einige dieser Elemente lassen sich mit inhaltsspezifischen Attributen weiter konfigurieren.

Weitere Informationen zu allen unterstützten Inhaltselementen finden Sie in der Referenzdokumentation zu PlaceContentConfigElement.

Zur Vereinfachung kann das Element gmp-place-content-config durch gmp-place-all-content ersetzt werden, um alle im kompakten Element „Ortsdetails“ verfügbaren Details anzuzeigen, oder durch gmp-place-standard-content, um eine Standardkonfiguration zu verwenden.

Darstellung konfigurieren

Der empfohlene Breitenbereich für das gmp-place-details-compact-Element in vertikaler Ausrichtung liegt zwischen 180 und 300 Pixeln. 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 liegt zwischen 180 und 500 Pixeln. Breiten unter 160 Pixel werden möglicherweise nicht richtig angezeigt. Bei Breiten unter 350 Pixeln wird das Vorschaubild 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 Benutzerdefiniertes Styling des Places UI Kit.

Wenn das Element „Kompakte Ortsdetails“ einem Infofenster hinzugefügt wird, muss das benutzerdefinierte Styling direkt auf das gmp-place-details-compact-Element angewendet werden. Das liegt daran, dass das Infofenster Teil des Shadow-DOM der Karte ist. Externe CSS-Stile werden daher nicht angewendet. 

<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

Vollständiges Codebeispiel ansehen

In diesem Beispiel wird gezeigt, wie einer Karte programmatisch ein PlaceDetailsCompactElement mithilfe eines InfoWindow und eines AdvancedMarkerElement hinzugefügt wird.

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

Testbeispiel