Erweiterte Place Details Elemente (Vorabversion)

Die Elemente „Advanced Place Details“ und „Advanced Place Details Compact“ Elemente sind HTML-Elemente, die Details für einen Ort rendern:

Sowohl das Element „Advanced Place Details“ als auch das Element „Advanced Place Details Compact“ bieten dieselben erweiterten Funktionen, einschließlich der Anpassung von Aktionsbuttons, des Auslassens des Ortsnamens und des Filterns von Rezensionen und Medien.

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

Element „Advanced Place Details“ (Vorabversion)

Klicken Sie auf eine Markierung auf der Karte, um die zugehörigen Ortsdetails in einem Element „Advanced Place Details“ zu sehen.

Das AdvancedPlaceDetailsElement unterstützt eine breite Palette von Inhaltselementen, darunter vollständige Öffnungszeiten, Website, Telefonnummer, KI-gestützte Zusammenfassung mit Fallback auf redaktionelle Zusammenfassung, typspezifische Highlights, Rezensionen, KI-gestützter Rezensionsüberblick, Plus Code und Featurelisten.

Wenn Sie Ortsdetails auf einer Karte anzeigen möchten, fügen Sie auf der HTML-Seite dem gmp-map Element ein gmp-advanced-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-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 den spezifischen Ortsinhalt, der vom gmp-advanced-place-details Element angezeigt wird, steuern, indem Sie untergeordnete Elemente verschachteln, um die Ortsdetails auszuwählen und zu konfigurieren. 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>

Jedes untergeordnete Inhaltselement wählt ein entsprechendes Ortsdetail aus, 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. der 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 übergreifende Konfigurationen für Quellenangaben von Maps API-Daten 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 zur Anpassung von Inhalten für das Orts-Widget.

Zur Vereinfachung können Sie auch gmp-place-all-content verwenden, um alle Details anzuzeigen, die im Element „Advanced Place Details“ verfügbar sind, oder mit gmp-place-standard-content , um eine Standardkonfiguration anzuzeigen.

Erscheinungsbild konfigurieren

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

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

Element „Advanced Place Details Compact“ (Vorabversion)

Klicken Sie auf eine Markierung auf der Karte, um die zugehörigen Ortsdetails in einem Element „Advanced Place Details Compact“ zu sehen.

Das AdvancedPlaceDetailsCompactElement 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 AdvancedPlaceDetailsCompactElement kann Name, Adresse, Bewertung, Typ, Preis, Barrierefreiheitssymbol, Öffnungsstatus und ein einzelnes Foto anzeigen. Es kann horizontal oder vertikal angezeigt werden, je nach Auswahl des orientation Attributs.

Im folgenden Snippet ist gmp-advanced-place-details-compact mit orientation auf horizontal konfiguriert. Ein zusätzliches Attribut, truncation-preferred, kürzt bestimmte Inhalte, damit sie in eine Zeile passen, anstatt sie umzubrechen. Das gmp-advanced-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-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 den spezifischen Ortsinhalt, der vom gmp-advanced-place-details-compact Element angezeigt wird, steuern, indem Sie untergeordnete Elemente verschachteln, um die Ortsdetails auszuwählen und zu konfigurieren. Ein Beispiel: 

<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 zur Anpassung von Inhalten für das Orts-Widget.

Zur Vereinfachung können Sie auch gmp-place-all-content verwenden, um alle Details anzuzeigen, die im Element „Advanced Place Details Compact“ verfügbar sind, oder mit gmp-place-standard-content , um eine Standardkonfiguration anzuzeigen.

Erscheinungsbild konfigurieren

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

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

Wenn das Element „Advanced Place Details Compact“ einem Infofenster hinzugefügt wird, muss das benutzerdefinierte Styling direkt auf das gmp-advanced-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-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;
}

In diesem Beispiel wird gezeigt, wie Sie einem AdvancedPlaceDetailsCompactElement programmatisch ein InfoWindow hinzufügen, indem Sie ein AdvancedMarkerElement verwenden.

Erweiterte Funktionen

Aktionsbuttons anpassen

Fügen Sie Aktionsbuttons als direkte untergeordnete Elemente der Komponente „Advanced Place Details“ hinzu. Verwenden Sie <gmp-place-link> für Standard Navigationsverbindungen und geben Sie das action Attribut 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 nicht angegeben 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 für visuelle Quellenangaben

Wichtig: Sie müssen Endnutzer darüber informieren, wenn ein benutzerdefinierter Aktions button Nutzerinformationen an einen anderen Drittanbieter als Google weitergibt. Weitere Informationen finden Sie unter Anforderungen für visuelle Quellenangaben.

Ortsnamen auslassen

Wenn Sie den Ortsnamen auslassen möchten, schließen Sie das <gmp-place-name> Element explizit aus Ihrem benutzerdefinierten Inhalt 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, indem Sie die searchMediaCount und searchReviewsCount Eigenschaften lesen. Sie müssen warten, bis das Ereignis gmp-load ausgelöst wird, bevor Sie auf diese Eigenschaften 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);
});