Éléments Place Details

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

• L'élément PlaceDetailsElement est compatible avec toutes les données de lieux visualisables et peut inclure plusieurs photos.
• Le PlaceDetailsCompactElement est conçu pour occuper un minimum d'espace et afficher un ensemble concis d'informations sur un lieu, y compris son nom, son adresse, sa note, etc. Il peut également inclure une seule photo.

É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, le résumé éditorial, les points forts spécifiques au type, les avis, le code Plus et les listes de caractéristiques.

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 au format "places/{place_id}" :

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

Conseil : Vous pouvez trouver l'ID d'un lieu spécifique à l'aide de l'outil de recherche d'ID de lieu.

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

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 : PlaceAddressElement sélectionne l'adresse du lieu, PlacePriceElement sélectionne la catégorie de prix du lieu, etc. 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 de 250 à 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 Place Details 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 UI Places.

Important : Lorsque vous apportez des modifications visuelles, vous devez respecter les exigences d'attribution.

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

Remarque : Le JavaScript est compilé à partir de l'extrait TypeScript.

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

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

Le PlaceDetailsCompactElement affiche les détails d'un lieu sélectionné en utilisant un minimum d'espace. Cela peut être utile dans une info-bulle 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.PlaceDetailsCompactElement 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'attribut orientation.

Dans l'extrait suivant, gmp-place-details-compact est imbriqué dans un élément gmp-map, 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 au format "places/{place_id}" :

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

Conseil : Vous pouvez trouver l'ID d'un lieu spécifique à l'aide de l'outil de recherche d'ID de lieu.

Configurer le contenu

Vous pouvez contrôler le contenu de lieu spécifique 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. 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 pixels. Les largeurs inférieures à 160 pixels 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 pixels. Les largeurs inférieures à 160 px peuvent ne pas s'afficher correctement. Si la largeur est inférieure à 350 px, la miniature ne s'affichera 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 UI Places.

Important : Lorsque vous apportez des modifications visuelles, vous devez respecter les exigences d'attribution.

Consulter un exemple de code complet

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

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

Remarque : Le JavaScript est compilé à partir de l'extrait TypeScript.

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