Elemente für „Place Details“

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

  • Das PlaceDetailsElement unterstützt alle , die sich visualisieren lassen, und kann mehrere Fotos enthalten.
  • Die PlaceDetailsCompactElement ist so konzipiert, dass sie nur wenig Platz benötigt und eine kurze Zusammenfassung der Informationen zu einem Ort enthält, z. B. Name, Adresse und Bewertung. Sie kann auch ein einzelnes Foto enthalten.

„Place Details“-Element

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

Die PlaceDetailsElement unterstützt eine Vielzahl von Inhaltselementen, darunter vollständige Öffnungszeiten, Website, Telefonnummer, redaktionelle Zusammenfassung, typspezifische Highlights, Rezensionen, 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. Dies kann ein Place-Objekt, eine Orts-ID oder der Ressourcenname eines Orts im Format „places/{place_id}“ sein: 

<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
    <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>
index.html
 
<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-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-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-reviews></gmp-place-reviews>
        <gmp-place-feature-list></gmp-place-feature-list>
        <gmp-place-media
          lightbox-preferred
          ></gmp-place-media>
          <gmp-place-attribution light-scheme-color="gray" dark-scheme-color="white"></gmp-place-attribution>
      </gmp-place-content-config>
    </gmp-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

Das gmp-place-content-config-Element selbst enthält eine Reihe untergeordneter Inhaltselemente, mit denen jeweils ein entsprechender Ortsdetail ausgewählt wird, der angezeigt werden soll: Mit PlaceAddressElement wird die Adresse des Orts ausgewählt. Mit PlacePriceElement wird die Preisstufe des Orts ausgewählt usw. 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 Attributionstexts 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 Pixel werden 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 von benutzerdefinierten CSS-Eigenschaften, mit denen sich die Farben und Schriftarten des Elements konfigurieren lassen. Weitere Informationen finden Sie unter Places UI Kit Custom Styling.

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');
let center = { lat: 47.759737, lng: -122.250632 };
async function initMap() {
    // Request needed libraries.
    await google.maps.importLibrary("maps");
    await google.maps.importLibrary("marker");
    await 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) {
            let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005);
            map.innerMap.panTo(adjustedCenter);
            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';
        }
    });
}
// Helper function to offset marker placement for better visual appearance.
function offsetLatLngRight(latLng, longitudeOffset) {
    const newLng = latLng.lng() + longitudeOffset;
    return new google.maps.LatLng(latLng.lat(), newLng);
}
initMap();
index.js

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center the content horizontally */
    align-items: flex-start; /* Align items to the top */
    width: 100%
}

h1 {
  font-size: 16px;
  text-align: center;
}

gmp-map {
  height: 500px;
}

gmp-place-details {
  border-radius: 0px;
  margin: 20px;
  width: 400px;
  height: 500px;
  margin-top: 0px;
}

gmp-advanced-marker {
    display: none;
}

.widget-container {
  min-width: 400px;
  overflow-y: none;
  overflow-x: none;
}
style.css

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Click on the map to view place details</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
        <gmp-advanced-marker></gmp-advanced-marker>
    </gmp-map>
    <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>
    <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>
  </body>
</html>
index.html

Kompaktes Element „Place Details“

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

Mit dem Element PlaceDetailsCompactElement werden Details für einen 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 einen Ort in einem Chat zu teilen, als Vorschlag für die Auswahl Ihres aktuellen Standorts oder in einem Medienartikel, um auf den Ort in Google Maps zu verweisen.Im PlaceDetailsCompactElement können Name, Adresse, Bewertung, Typ, Preis, Barrierefreiheitssymbol, Öffnungszeiten und ein einzelnes Foto angezeigt werden. Sie kann horizontal oder vertikal angezeigt werden, je nach Auswahl im Attribut orientation.

Im folgenden Snippet ist gmp-place-details-compact in einem gmp-map-Element verschachtelt, wobei orientation auf horizontal festgelegt ist. Ein zusätzliches Attribut, truncation-preferred, bewirkt, dass bestimmte Inhalte gekürzt werden, damit sie in eine Zeile passen, anstatt umgebrochen zu werden. Das gmp-place-details-compact-Element enthält ein untergeordnetes Element, gmp-place-details-place-request, zum Auswählen des Orts. Dies kann ein Place-Objekt, eine Orts-ID oder der Ressourcenname eines Orts im Format „places/{place_id}“ sein: 

<gmp-map center="47.75972, -122.25094" zoom="19" map-id="DEMO_MAP_ID">
  <gmp-place-details-compact orientation = "horizontal" truncation-preferred slot="control-block-start-inline-center" >
    <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>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

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. Das gmp-place-content-config-Element selbst enthält eine Reihe untergeordneter Inhaltselemente, mit denen jeweils ein entsprechender Ortsdetail ausgewählt wird, der 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 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 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 Places UI Kit Custom Styling.

Vollständiges Codebeispiel ansehen

In diesem Beispiel wird gezeigt, wie Sie einer Karte programmatisch mit einem AdvancedMarkerElement ein PlaceDetailsCompactElement hinzufügen.

JavaScript

// Use querySelector to select elements for interaction.
const mapContainer = document.getElementById("map-container");
const placeDetails = document.querySelector("gmp-place-details-compact");
const placeDetailsRequest = document.querySelector("gmp-place-details-place-request");
let gMap;
let marker;
async function initMap() {
    const { PlaceDetailsCompactElement, PlaceDetailsPlaceRequestElement } = await google.maps.importLibrary("places");
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    gMap = new Map(mapContainer, { mapId: 'DEMO_MAP_ID' });
    marker = new AdvancedMarkerElement({ map: gMap });
    // Hide the map type control.
    gMap.setOptions({ mapTypeControl: false });
    // Set up map, marker, and infowindow once widget is loaded.
    placeDetails.style.visibility = 'visible';
    placeDetails.addEventListener('gmp-load', (event) => {
        console.log("placeDetails initialized!");
        updateMapAndMarker();
    });
    // Add an event listener to handle clicks.
    gMap.addListener("click", async (event) => {
        event.stop();
        // Fire when the user clicks on a POI.
        if (event.placeId) {
            console.log("clicked on POI");
            console.log(event.placeId);
            placeDetailsRequest.place = event.placeId;
            updateMapAndMarker();
        }
        else {
            // Fire when the user clicks the map (not on a POI).
            console.log('No place was selected.');
        }
        ;
    });
    // Function to update map, marker, and infowindow based on place details
    const updateMapAndMarker = () => {
        console.log("function called");
        if (placeDetails.place && placeDetails.place.location) {
            marker.gMap = null;
            let adjustedCenter = offsetLatLngRight(placeDetails.place.location, 0.002);
            gMap.panTo(adjustedCenter);
            gMap.setZoom(16); // Set zoom after panning if needed
            marker.content = placeDetails;
            marker.position = placeDetails.place.location;
        }
        else {
            console.log("else");
        }
    };
}
// Helper function to offset marker placement for better visual appearance.
function offsetLatLngRight(latLng, latitudeOffset) {
    const newLat = latLng.lat() + latitudeOffset;
    return new google.maps.LatLng(newLat, latLng.lng());
}
initMap();
index.js

CSS

html,
body {
  display: flex;
  width: 100%;
  height: 400px;
  margin: 0;
}

h1 {
  font-size: 16px;
  text-align: center;
}

#map-container {
    box-sizing: border-box;
    width: 100%;
}
gmp-place-details-compact {
  /* Sets the color for text and icons on the surface */
  /* Adapts automatically to the user's system light/dark mode preference */
  --gmp-mat-color-on-surface: light-dark(black, white);
  /* Sets the background color of the surface */
  /* Adapts automatically to the user's system light/dark mode preference */
  --gmp-mat-color-surface: light-dark(white, black);
  /* Defines the primary font stack used within the component */
  --gmp-mat-font-family: Google Sans Text, sans-serif;
  /* Defines the style for medium body text (e.g., address, descriptions) */
  --gmp-mat-font-body-medium: normal 400 0.875em/1.25em var(--gmp-mat-font-family, 'Google Sans Text');

  width: 360px;
  border: none;
  padding: 0;
  margin: 0;
  position: relative;
  transform: translate(0, calc(-20px));
}

/* This creates the pointer attached to the bottom of the element. */
gmp-place-details-compact::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 20px solid var(--gmp-mat-color-surface, light-dark(white, black));
}

style.css

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Click on the map to view place details</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id = "map-container"></div>
    <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request place = ChIJn97JQNpC1moRIcJsVMEQLI8></gmp-place-details-place-request>
        <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details-compact>
    <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>  
  </body>
</html>
index.html