Cette page a été traduite par l'API Cloud Translation.

Qu'est-ce que le Kit UI pour Places et comment l'utiliser pour créer des solutions attrayantes ?

Introduction

Pour des millions d'utilisateurs dans le monde, Google Maps est la source de référence pour obtenir des informations précises et à jour sur les lieux. La base de données Google, qui contient plus de 250 millions de lieux dans le monde, y compris des avis, des photos et des notes d'utilisateurs, offre un niveau de détail et de fiabilité inégalé. Pour fournir des données actualisées et factuelles, nous apportons 100 millions de modifications à la carte chaque jour.

Le Kit UI pour Places est une bibliothèque de composants prête à l'emploi et économique, alimentée par les nombreuses informations de Google Maps sur les lieux. Il vous permet d'intégrer l'expérience Places de Google, que vous connaissez et en laquelle vous avez confiance, à vos cas d'utilisation de front-end sur la carte de votre choix.

Composants

Le Kit UI pour Places propose un ensemble de composants d'interface utilisateur individuels qui peuvent être utilisés indépendamment ou ensemble pour créer une expérience Places fluide.

Place Details : ce composant affiche des informations détaillées sur un lieu, comme son nom, son adresse, son numéro de téléphone, son site Web, ses horaires d'ouverture et les avis des utilisateurs.
Recherche de lieux : ce composant affiche une liste de lieux à proximité par catégorie ou par recherche en texte libre.
Saisie semi-automatique de base des lieux : ce composant crée un champ de saisie de texte et présente une liste déroulante de lieux prédits correspondant à la saisie.

Principaux avantages du Kit UI pour Places

Facilité d'utilisation : intégrez l'expérience utilisateur fiable de Google Places à vos applications avec un minimum de code.
Utilisation sur n'importe quelle carte : pour la première fois, vous pouvez utiliser le contenu Lieux sur une carte autre que Google.
Interface utilisateur familière : les composants fournissent une interface utilisateur cohérente avec l'expérience Google Maps, ce qui la rend intuitive pour les utilisateurs.
Personnalisation : le kit d'interface utilisateur Places offre de nombreuses options de personnalisation visuelle sans frais supplémentaires. Vous pouvez utiliser différents paramètres et propriétés CSS personnalisées pour configurer les éléments d'affichage.
Rentabilité : le Kit UI pour Places peut être une solution plus rentable que l'utilisation directe de l'API Places.

Cas d'utilisation concrets

Le Kit UI pour Places peut être utilisé dans diverses applications pour améliorer l'expérience utilisateur.

Applications de découverte locale : une application "d'activités" peut utiliser le composant Place Search pour afficher une liste des restaurants, cafés ou attractions à proximité. Lorsqu'un utilisateur sélectionne un lieu dans la liste, le composant Détails du lieu peut être utilisé pour afficher plus d'informations sur ce lieu.
Applications de planification de voyages : une application de voyage peut utiliser la recherche de lieux pour permettre aux utilisateurs de rechercher des hôtels ou des points d'intérêt dans une ville spécifique. Le composant "Détails du lieu" peut ensuite afficher des photos, des notes et des avis pour chaque lieu afin de faciliter la planification.
Portails de recherche de biens immobiliers : une application immobilière peut utiliser un composant Place Search pour afficher différentes catégories de lieux à proximité afin d'aider un acheteur ou un locataire potentiel à comprendre le style de vie du quartier avant de planifier une visite.
Applications de messagerie et de réseaux sociaux : une application de messagerie et de réseaux sociaux peut utiliser la recherche de lieux pour rechercher et suggérer des lieux à proximité afin d'aider les utilisateurs à trouver facilement un lieu de rendez-vous. Le composant Place Details peut être utilisé pour afficher des informations détaillées sur les lieux lorsque les utilisateurs les partagent. Grâce au bouton Google Maps prédéfini, les utilisateurs peuvent facilement et précisément explorer d'autres lieux et obtenir des informations de voyage sur Google Maps.

Personnalisation

Vous pouvez personnaliser la richesse du contenu et les styles des composants du kit d'interface utilisateur Places en fonction de vos besoins.

L'utilisation de propriétés CSS personnalisées, par exemple les propriétés CSS du composant Détails du lieu, vous permet d'adapter l'apparence des composants à la conception de votre application. Vous pouvez personnaliser les couleurs, les polices et d'autres aspects visuels. Il est important de respecter les exigences en matière d'attribution lorsque vous apportez des modifications visuelles. Par exemple, vous pouvez modifier la couleur principale utilisée pour les liens et le nombre d'avis avec la propriété CSS --gmp-mat-color-primary.

Vous pouvez contrôler le contenu de lieu spécifique affiché à l'aide d'un élément gmp-place-content-config imbriqué pour sélectionner et configurer le contenu, ou simplement à l'aide de gmp-place-all-content pour afficher tout le contenu disponible.

Un outil de personnalisation est disponible dans la documentation pour vous aider à visualiser différentes configurations de style.

Recommandations pour l'implémentation

Le Kit UI pour Places est disponible via Maps JavaScript et le SDK Places pour Android et iOS.

Premiers pas

Pour commencer à utiliser le Kit UI pour Places, procédez comme suit :

Configurez votre projet Google Cloud : vous avez besoin d'un projet Cloud avec un compte de facturation pour utiliser le Places UI Kit.
Activez le Kit UI pour Places : vous devez activer le Kit UI pour Places pour votre projet.
Obtenez une clé API : une clé API est requise pour authentifier vos requêtes.

Pour en savoir plus sur les plates-formes spécifiques, consultez les instructions de démarrage du kit d'interface utilisateur Places pour JavaScript, Android et iOS.

Exemple d'implémentation

Voici un exemple d'implémentation de Place Search et Place Details avec des cartes JavaScript dynamiques. Un utilisateur peut rechercher des lieux à proximité en saisissant du texte libre. Lorsque vous cliquez sur un lieu dans la liste des résultats de recherche, le composant "Détails du lieu" s'affiche sur les cartes dynamiques.

Vous trouverez ci-dessous les extraits de code. Vous trouverez la démonstration et le code complet dans ce dépôt GitHub.

Avant de commencer, assurez-vous d'avoir suivi les étapes de démarrage ci-dessus qui concernent JavaScript.

Chargez les bibliothèques requises en HTML.

<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: "YOUR_API_KEY",
    v: "weekly",
    // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
    // Add other bootstrap parameters as needed, using camel case.
  });
</script>

En HTML, ajoutez un conteneur de carte, un champ de saisie de texte et un bouton de recherche. Ce conteneur de carte contiendra les cartes dynamiques qui seront créées en JavaScript. La zone de saisie permet aux utilisateurs de saisir des requêtes de recherche.

<div id="map-container"></div>
<div class="controls">
    <input type="text" class="query-input" />
    <button class="search-button">Search</button>
</div>

Ajoutez le composant Place Search. Le composant Place Search fournit des mises en page horizontales et verticales. Dans cet exemple, nous utilisons la mise en page horizontale. L'attribut "selectable" permet de rendre l'élément de la liste des résultats de recherche cliquable (l'événement gmp-select est déclenché lorsqu'il est cliqué).

Dans l'élément gmp-place-search, nous ajoutons deux éléments enfants :

gmp-place-all-content est utilisé pour afficher tous les contenus disponibles.
gmp-place-text-search-request permet de configurer l'élément Place Search.

Dans cet exemple, nous allons définir la configuration en JavaScript.

<div class="list-container">
    <gmp-place-search orientation="horizontal" selectable>
         <gmp-place-all-content></gmp-place-all-content>  
         <gmp-place-text-search-request></gmp-place-text-search-request>
    </gmp-place-search>
</div>

Ajoutez ensuite le composant "Détails du lieu", disponible en mise en page compacte et complète, chacune prenant en charge les orientations verticale et horizontale. Cet exemple utilise la mise en page horizontale compacte. Comme pour le composant Place Search, nous ajoutons deux éléments enfants :

gmp-place-all-content indique que tout le contenu disponible est affiché.
gmp-place-details-place-request permet de sélectionner un lieu.

Dans cet exemple, nous allons définir le lieu en JavaScript.

<div id="details-container">
     <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request></gmp-place-details-place-request> 
        <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details-compact> 
</div>

En JavaScript, importez les bibliothèques dont nous avons besoin pour cet exemple. La bibliothèque Places importe la bibliothèque Places UI Kit pour JavaScript.

const {Map} = await google.maps.importLibrary("maps");
await google.maps.importLibrary("places");
({AdvancedMarkerElement} = await google.maps.importLibrary("marker"));
({LatLngBounds, LatLng} = await google.maps.importLibrary("core"));

Créez des cartes dynamiques.

const mapContainer = document.getElementById("map-container");
const mapOptions = {
    center: {lat: 37.422, lng: -122.085},
    zoom: 12 
};
const gMap = new Map(mapContainer, mapOptions);

Ajoutez un écouteur de clics au bouton de recherche pour lancer une recherche de lieux. Lorsque les résultats de recherche se chargent, créez des repères pour chaque lieu et ajoutez-y un écouteur de clic. Si vous cliquez sur un repère, les informations détaillées sur le lieu correspondant sont demandées et affichées.

Lorsque des lieux sont trouvés et que l'élément Place Search se charge, la propriété places de l'élément Place Search est renseignée avec un tableau de résultats. Chaque résultat est un objet lieu contenant son ID de lieu, ses coordonnées et sa fenêtre d'affichage. Pour récupérer des informations, transmettez l'ID de lieu ou l'objet de lieu entier à l'élément Place Details.

const queryInput = document.querySelector(".query-input");
const searchButton = document.querySelector(".search-button");
const placeSearch = document.querySelector("gmp-place-search");
const placeSearchQuery = document.querySelector("gmp-place-text-search-request");
const placeDetails = document.querySelector("gmp-place-details-compact");
const placeRequest = document.querySelector("gmp-place-details-place-request");

placeDetailsPopup = new AdvancedMarkerElement({
    map: null,
    content: placeDetails,
    zIndex: 1
});

searchButton.addEventListener("click", searchPlaces);

function searchPlaces(){    
    if (queryInput.value.trim()) {
        placeSearchQuery.textQuery = queryInput.value.trim();
        placeSearchQuery.locationBias = gMap.getBounds();
        placeSearch.addEventListener('gmp-load', addMarkers, { once: true });
    }
}

async function addMarkers(){
    const bounds = new LatLngBounds();
    placeSearch.places.forEach((place) => {
        let marker = new AdvancedMarkerElement({
            map: gMap,
            position: place.location
        });
        bounds.extend(place.location);
        marker.addListener('click',(event) => {
            placeRequest.place = place;
            placeDetails.style.display = 'block';
            placeDetailsPopup.position = place.location;
            placeDetailsPopup.map = gMap;
            gMap.fitBounds(place.viewport, {top: 200, left: 100});
        });
        gMap.setCenter(bounds.getCenter());
        gMap.fitBounds(bounds);
    });
}

N'oubliez pas de consulter la démonstration et le code complet sur ce dépôt GitHub.

Ressources pour vous aider à créer

Contributeurs

Auteurs principaux :

Teresa Qin | Ingénieure des solutions Google Maps Platform

Qu'est-ce que le Kit UI pour Places et comment l'utiliser pour créer des solutions attrayantes ? Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.