Elemente für „Place Details“

Plattform auswählen: Android iOS JavaScript

Die Elemente „Ortsdetails“ und „Ortsdetails kompakt“ sind HTML Elemente, die Details zu einem Ort rendern:

Mit dem Anpassungstool können Sie visualisieren, wie sich verschiedene Eigenschaftssätze auf das Erscheinungsbild eines Elements „Ortsdetails“ auswirken, und auf den Code in HTML/CSS, Kotlin/XML, und Swift zugreifen.

Element „Ortsdetails“

Klicken Sie auf eine Markierung auf der Karte, um die Ortsdetails in einem Element „Ortsdetails“ 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 auf der HTML-Seite dem gmp-map Element 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

Sie können den spezifischen Ortsinhalt, der vom gmp-place-details Element angezeigt wird, 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 auswählen, 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 enthalten 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. Es enthält das lightbox-preferred Attribut, mit dem das Foto durch Klicken in einem Lightbox-Fenster geöffnet wird. 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 „Ortsdetails“ 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 Pixel. Bei einer Breite von weniger als 250 Pixel werden die Details möglicherweise nicht richtig angezeigt. Legen Sie die Höhe entsprechend Ihrer Anwendung fest. Das Element „Ortsdetails“ 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 Benutzerdefiniertes Design 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 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 „Ortsdetails kompakt“

Klicken Sie auf eine Markierung auf der Karte, um die Ortsdetails in einem Element „Ortsdetails kompakt“ 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 so konfiguriert, dass orientation auf horizontal gesetzt ist. 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

Sie können den spezifischen Ortsinhalt, der vom gmp-place-details-compact Element angezeigt wird, 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>

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 „Ortsdetails kompakt“ 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 Pixel. Bei einer Breite von weniger als 160 Pixel 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 Pixel. Bei einer Breite von weniger als 160 Pixel werden die Details möglicherweise nicht richtig angezeigt. Bei einer Breite von weniger als 350 Pixel 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 Benutzerdefiniertes Design des Places UI Kit.

Wenn das Element „Ortsdetails kompakt“ einem Infofenster hinzugefügt wird, muss das benutzerdefinierte Design direkt auf das gmp-place-details-compact Element angewendet werden. Das Infofenster ist Teil des Shadow DOM der Karte, daher werden externe CSS-Stile 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>

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>