Éléments Place Details

Sélectionnez une plate-forme : Android iOS JavaScript

Les éléments Place Details et Place Details Compact sont des éléments HTML qui affichent des informations sur un lieu :

Élément Place Details

Cliquez sur un repère sur la carte pour afficher les détails du lieu dans un élément "Détails du lieu".

Le PlaceDetailsElement accepte un large éventail d'éléments de contenu, y compris les horaires d'ouverture complets, le site Web, le numéro de téléphone, un résumé optimisé par l'IA avec un résumé éditorial de secours, des points forts spécifiques au type, des avis, un résumé des avis optimisé par l'IA, le code Plus et des listes de fonctionnalités.

Pour afficher les détails d'un lieu sur une carte, ajoutez un élément gmp-place-details à l'élément gmp-map sur la page HTML. Incluez un élément enfant, gmp-place-details-place-request, pour sélectionner le lieu. Il peut s'agir d'un objet Place, d'un ID de lieu ou du nom de ressource d'un lieu : 

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

Configurer le contenu

Vous pouvez contrôler le contenu spécifique du lieu affiché par l'élément gmp-place-details à l'aide d'un élément gmp-place-content-config imbriqué pour sélectionner et configurer les détails du lieu, comme le montre cet exemple : 

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

L'élément gmp-place-content-config lui-même contient un certain nombre d'éléments de contenu enfant, et chacun sélectionne un détail de lieu correspondant à afficher : gmp-place-address sélectionne l'adresse du lieu, gmp-place-price sélectionne le niveau de prix du lieu, etc. Les éléments gmp-place-summary et gmp-place-review-summary fournissent un résumé optimisé par l'IA du lieu et de ses avis, respectivement. L'ordre des éléments enfants n'a pas d'importance, car les détails sélectionnés sont toujours affichés dans un ordre prédéfini fixe.

Certains de ces éléments peuvent être configurés plus précisément à l'aide d'attributs spécifiques au contenu :

  • L'élément gmp-place-media permet d'afficher une seule photo et inclut un attribut lightbox-preferred qui ouvre la photo dans une lightbox lorsque l'utilisateur clique dessus. La lightbox est désactivée par défaut.
  • L'élément gmp-place-attribution permet d'afficher la source de la photo. Les attributs light-scheme-color et dark-scheme-color sont utilisés pour définir la couleur du texte d'attribution en mode clair et sombre.

Pour en savoir plus sur tous les éléments de contenu acceptés, consultez la documentation de référence sur PlaceContentConfigElement.

Pour plus de simplicité, l'élément gmp-place-content-config peut être remplacé par gmp-place-all-content pour afficher tous les détails disponibles dans l'élément "Détails du lieu", ou par gmp-place-standard-content pour afficher une configuration standard.

Configurer l'apparence

La plage de largeur recommandée pour l'élément gmp-place-details est comprise entre 250 et 400 pixels. Les largeurs inférieures à 250 px peuvent ne pas s'afficher correctement. Définissez la hauteur en fonction de votre application. L'élément "Détails du lieu" est conçu pour défiler dans l'espace alloué, si nécessaire.

L'élément gmp-place-details accepte également diverses propriétés CSS personnalisées pour configurer les couleurs et les polices de l'élément. Pour en savoir plus, consultez Personnalisation du style du kit d'UI Places.

Afficher l'exemple de code complet

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

Essayer l'exemple

Élément compact Place Details

Cliquez sur un repère sur la carte pour afficher les détails du lieu dans un élément compact "Détails du lieu".

PlaceDetailsCompactElement affiche les détails d'un lieu sélectionné en utilisant un espace minimal. Cela peut être utile dans une fenêtre d'informations mettant en évidence un lieu sur une carte, dans une expérience de réseau social comme le partage d'un lieu dans une discussion, comme suggestion pour sélectionner votre position actuelle ou dans un article de presse pour faire référence au lieu sur Google Maps. Le PlaceDetailsCompactElement peut afficher le nom à afficher, l'adresse, la note, le type, le prix, l'icône d'accessibilité, l'état d'ouverture et une seule photo. Il peut s'afficher horizontalement ou verticalement, selon la valeur de l'attribut orientation.

Dans l'extrait suivant, gmp-place-details-compact est configuré avec orientation défini sur horizontal. Un attribut supplémentaire, truncation-preferred, tronque certains contenus pour qu'ils tiennent sur une seule ligne au lieu d'être renvoyés à la ligne. L'élément gmp-place-details-compact contient un élément enfant, gmp-place-details-place-request, pour sélectionner le lieu. Il peut s'agir d'un objet Place, d'un ID de lieu ou du nom de ressource d'un lieu. 

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

Configurer le contenu

Vous pouvez contrôler le contenu spécifique du lieu affiché par l'élément gmp-place-details-compact à l'aide d'un élément gmp-place-content-config imbriqué pour sélectionner et configurer les détails du lieu, comme indiqué dans cet extrait : 

<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

L'élément gmp-place-content-config lui-même contient un certain nombre d'éléments de contenu enfants, et chacun sélectionne un détail de lieu correspondant à afficher. L'ordre des éléments enfants n'a pas d'importance, car les détails sélectionnés sont toujours affichés dans un ordre prédéfini fixe. Certains de ces éléments peuvent être configurés plus précisément à l'aide d'attributs spécifiques au contenu.

Pour en savoir plus sur tous les éléments de contenu acceptés, consultez la documentation de référence sur PlaceContentConfigElement.

Pour plus de simplicité, l'élément gmp-place-content-config peut être remplacé par gmp-place-all-content pour afficher tous les détails disponibles dans l'élément "Détails du lieu compact", ou par gmp-place-standard-content pour afficher une configuration standard.

Configurer l'apparence

La plage de largeur recommandée pour l'élément gmp-place-details-compact en orientation verticale est de 180 à 300 px. Les largeurs inférieures à 160 px peuvent ne pas s'afficher correctement. Ne définissez pas de hauteur fixe.

La plage de largeur recommandée pour l'élément gmp-place-details-compact en orientation horizontale est de 180 à 500 px. Les largeurs inférieures à 160 px peuvent ne pas s'afficher correctement. À des largeurs inférieures à 350 px, l'image miniature ne s'affiche pas. Ne définissez pas de hauteur fixe.

L'élément gmp-place-details-compact accepte également diverses propriétés CSS personnalisées pour configurer les couleurs et les polices de l'élément. Pour en savoir plus, consultez Personnalisation du style du kit d'UI Places.

Notez que si l'élément compact Détails du lieu est ajouté à une fenêtre d'informations, un style personnalisé doit être appliqué directement à l'élément gmp-place-details-compact. En effet, la fenêtre d'informations fait partie du DOM fantôme de la carte. Les styles CSS externes ne seront donc pas appliqués. 

<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

Consulter un exemple de code complet

Cet exemple montre comment ajouter un PlaceDetailsCompactElement à une carte de manière programmatique à l'aide d'un InfoWindow et d'un AdvancedMarkerElement.

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

Essayer l'exemple