Éléments avancés de Place Details (aperçu)

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

Les éléments Advanced Place Details et Advanced Place Details Compact Element offrent les mêmes fonctionnalités avancées, y compris la personnalisation des boutons d'action, l'omission du nom du lieu et le filtrage des avis et des contenus multimédias.

Utilisez l' outil de personnalisation pour visualiser l'impact de différents ensembles de propriétés sur l'apparence d'un élément Places Details et accéder au code en HTML/CSS, Kotlin/XML, et Swift.

Élément Advanced Place Details (preview)

Cliquez sur un repère sur la carte pour afficher les informations sur le lieu dans un élément Advanced Place Details.

The AdvancedPlaceDetailsElement est compatible avec 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é généré par l'IA avec une solution de repli vers un résumé éditorial, des points forts spécifiques au type, des avis, un résumé des avis généré par l'IA, ainsi que des listes de code et de fonctionnalités.

Pour afficher les informations sur un lieu sur une carte, ajoutez un gmp-advanced-place-details élément à l' gmp-map élément 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-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>

Configurer le contenu

Vous pouvez contrôler le contenu spécifique du lieu affiché par l' gmp-advanced-place-details élément en imbriquant des éléments enfants pour sélectionner et configurer les informations sur le lieu, comme illustré dans cet exemple : 

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

Chaque élément de contenu enfant sélectionne une information de lieu correspondante à 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 respectivement un résumé du lieu et de ses avis généré par l'IA. L'ordre des éléments enfants n'a pas d'importance, car les informations sélectionnées sont toujours affichées dans un ordre prédéfini fixe.

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

  • L' gmp-place-media élément permet d'afficher une seule photo et inclut un lightbox-preferred attribut 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 des configurations d'attribution de données globales de l'API Google Maps, telles que la source d'une photo ou d'un avis. Les attributs light-scheme-color et dark-scheme-color permettent de définir la couleur du texte d'attribution en mode clair et sombre.

Pour en savoir plus sur tous les éléments de contenu compatibles, consultez la documentation de référence Personnalisation du contenu du widget Lieu.

Pour plus de simplicité, vous pouvez également utiliser gmp-place-all-content pour afficher toutes les informations disponibles dans l'élément Advanced Place Details, ou avec gmp-place-standard-content pour afficher une configuration standard.

Configurer l'apparence

La plage de largeur recommandée pour l' gmp-advanced-place-details élément est de 250 à 400 px. Les largeurs inférieures à 250 px peuvent ne pas s'afficher correctement. Définissez la hauteur en fonction de votre application. L'élément Advanced Place Details est conçu pour défiler dans l'espace alloué si nécessaire.

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

Élément Advanced Place Details Compact (preview)

Cliquez sur un repère sur la carte pour afficher les informations sur le lieu dans un élément Advanced Place Details Compact.

The AdvancedPlaceDetailsCompactElement affiche des informations sur 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 multimédia pour référencer le lieu sur Google Maps. The AdvancedPlaceDetailsCompactElement peut afficher le nom, l'adresse, la note, le type, le prix, l'icône d'accessibilité, l'état d'ouverture et une seule photo. Il peut être affiché horizontalement ou verticalement, selon la sélection de l' orientation attribut.

Dans l'extrait suivant, gmp-advanced-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 de passer à la ligne. L'élément gmp-advanced-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-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>

Configurer le contenu

Vous pouvez contrôler le contenu spécifique du lieu affiché par l' gmp-advanced-place-details-compact élément en imbriquant des éléments enfants pour sélectionner et configurer les informations sur le lieu, comme illustré dans cet extrait : 

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

Chaque élément de contenu enfant sélectionne une information de lieu correspondante à afficher. L'ordre des éléments enfants n'a pas d'importance, car les informations sélectionnées sont toujours affichées dans un ordre prédéfini fixe. Certains de ces éléments peuvent être configurés plus en détail à l'aide d'attributs spécifiques au contenu.

Pour en savoir plus sur tous les éléments de contenu compatibles, consultez la documentation de référence Personnalisation du contenu du widget Lieu.

Pour plus de simplicité, vous pouvez également utiliser gmp-place-all-content pour afficher toutes les informations disponibles dans l'élément Advanced Place Details Compact, ou avec gmp-place-standard-content pour afficher une configuration standard.

Configurer l'apparence

La plage de largeur recommandée pour l'élément gmp-advanced-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' gmp-advanced-place-details-compact élément en orientation horizontale est de 180 à 500 px. Les largeurs inférieures à 160 px peuvent ne pas s'afficher correctement. Pour les largeurs inférieures à 350 px, l'image miniature ne s'affiche pas. Ne définissez pas de hauteur fixe.

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

Notez que si l'élément Advanced Place Details Compact est ajouté à une fenêtre d'informations, un style personnalisé doit être appliqué directement à l' gmp-advanced-place-details-compact élément. En effet, la fenêtre d'informations fait partie du DOM fantôme de la carte. Par conséquent, les styles CSS externes ne seront pas appliqués. 

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

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

Fonctionnalités avancées

Personnaliser les boutons d'action

Ajoutez des boutons d'action en tant qu'enfants directs du composant Advanced Place Details component. Utilisez <gmp-place-link> pour les connexions de navigation standard et spécifiez explicitement l'attribut action. Vous pouvez éventuellement spécifier l'attribut slot. Les actions prédéfinies valides sont open-website, open-directions, open-map, et call. Si l'attribut slot est omis, la valeur par défaut est action-main. 

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

Exigences concernant l'attribution visuelle

Important : Vous devez indiquer clairement aux utilisateurs finaux quand un bouton d'action personnalisé partagera des informations utilisateur avec un tiers autre que Google. Consultez les exigences concernant l'attribution visuelle.

Omettre le nom du lieu

Pour omettre le nom du lieu, excluez explicitement l' <gmp-place-name> élément de votre contenu personnalisé. 

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

Filtrer les avis et les contenus multimédias

Cet exemple de code n'affiche que les contenus multimédias et les avis qui mentionnent "café".

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

Vous pouvez également utiliser JavaScript pour récupérer le nombre total d'éléments correspondant à la requête de recherche donnée en lisant les propriétés searchMediaCount et searchReviewsCount. Vous devez attendre l'événement gmp-load avant accéder à ces propriétés. 

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);
});