Elemente für „Place Details“

Plattform auswählen: Android iOS JavaScript

Das Element „Place Details“ und das Element „Place Details Compact“ sind HTML Elemente, die Details zu einem Ort rendern:

Element „Place Details“

Klicken Sie auf eine Markierung auf der Karte, um die Ortsdetails im Element „Place Details“ zu sehen.

Das PlaceDetailsElement unterstützt eine Vielzahl von Inhaltselementen, darunter vollständige Öffnungszeiten, Website, Telefonnummer, KI-gestützte Zusammenfassung mit Fallback auf redaktionelle Zusammenfassung, typspezifische Highlights, Rezensionen, KI-gestützte Rezensionszusammenfassung, Plus Code und Feature-Listen.

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

Mit einem verschachtelten gmp-place-content-config Element können Sie den spezifischen Ortsinhalt steuern, der vom gmp-place-details Element angezeigt wird. So können Sie die Ortsdetails 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 auswählen, das angezeigt werden soll: gmp-place-address wählt die Adresse des Orts aus, gmp-place-price wählt die Preisklasse 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 gmp-place-media Element wird verwendet, um ein einzelnes Foto anzuzeigen, und enthält ein lightbox-preferred Attribut, das das Foto beim Klicken in einem Lightbox-Fenster öffnet. Lightbox ist standardmäßig deaktiviert.
  • Das gmp-place-attribution Element wird verwendet, um die Quelle des Fotos anzuzeigen. Mit den Attributen light-scheme-color und dark-scheme-color wird die Farbe der Quellenangabe im hellen und dunklen Modus festgelegt.

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

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

Darstellung konfigurieren

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

Das gmp-place-details-Element unterstützt auch eine Vielzahl benutzerdefinierter CSS-Eigenschaften, mit denen die Farben und Schriftarten des Elements konfiguriert werden können. 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>

Element „Place Details Compact“

Klicken Sie auf eine Markierung auf der Karte, um die Ortsdetails im Element „Place Details Compact“ zu sehen.

Das PlaceDetailsCompactElement rendert Details für einen ausgewählten Ort und benötigt dabei nur wenig Platz. Das kann in einem Infofenster nützlich sein, in dem ein Ort auf einer Karte hervorgehoben wird, in sozialen Medien Erfahrung wie das 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. Das PlaceDetailsCompactElement kann Name, Adresse, Bewertung, Typ, Preis, ein Symbol für Barrierefreiheit, den Öffnungsstatus und ein einzelnes Foto anzeigen. Es kann horizontal oder vertikal angezeigt werden, je nach Auswahl des orientation Attributs.

Im folgenden Snippet ist gmp-place-details-compact mit orientation auf horizontal konfiguriert. Mit dem zusätzlichen Attribut truncation-preferred wird bestimmter Inhalt auf eine Zeile gekürzt, anstatt umgebrochen zu werden. Das gmp-place-details-compact Element enthält ein untergeordnetes Element, gmp-place-details-place-request, um den Ort auszuwählen. Dies 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

Mit einem verschachtelten gmp-place-content-config Element können Sie den spezifischen Ortsinhalt steuern, der vom gmp-place-details-compact Element angezeigt wird. So können Sie die Ortsdetails 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>

Das gmp-place-content-config Element selbst enthält eine Reihe untergeordneter Inhaltselemente, die jeweils ein entsprechendes Ortsdetail auswählen, 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 PlaceContentConfigElement Referenzdokumentation.

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

Darstellung konfigurieren

Der empfohlene Breitenbereich für das gmp-place-details-compact Element in vertikaler Ausrichtung liegt zwischen 180 und 300 Pixeln. Bei Breiten unter 160 Pixeln werden die Details 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. Bei Breiten unter 160 Pixeln werden die Details möglicherweise nicht richtig angezeigt. Bei Breiten unter 350 Pixeln wird das Miniaturbild nicht angezeigt. Legen Sie keine feste Höhe fest.

Das gmp-place-details-compact-Element unterstützt auch eine Vielzahl benutzerdefinierter CSS-Eigenschaften, mit denen die Farben und Schriftarten des Elements konfiguriert werden können. Weitere Informationen finden Sie unter Benutzerdefinierte Stile für das Places UI Kit.

Wenn das Element „Place Details Compact“ einem Infofenster hinzugefügt wird, müssen benutzerdefinierte Stile direkt auf das gmp-place-details-compact Element angewendet werden. Das liegt daran, dass das Infofenster Teil des Shadow DOM der Karte ist, sodass externe CSS-Stile 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 einem PlaceDetailsCompactElement programmatisch ein InfoWindow hinzufügen, indem Sie ein AdvancedMarkerElement verwenden.

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>