Premiers pas avec le kit UI Places

Sélectionnez une plate-forme : Android iOS JavaScript

Cette page vous explique comment obtenir une clé API, activer le kit d'interface utilisateur Places et charger les bibliothèques qui le prennent en charge.

Obtenir une clé API et activer le kit d'interface utilisateur Places

Avant d'utiliser le Kit UI pour Places, vous devez :

  • créer un projet Cloud avec un compte de facturation ;
  • Activez le Kit UI pour Places.
  • obtenez une clé API

Pour en savoir plus, consultez Configurer votre projet Google Cloud.

Activer le kit UI Places

Obtenir une clé API

Charger les bibliothèques requises

Pour charger les bibliothèques compatibles avec le kit d'UI Places, commencez par charger l'API Maps JavaScript en ajoutant le chargeur d'amorçage intégré au code de votre application, comme indiqué dans l'extrait de code suivant : 

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

Utilisez ensuite l'opérateur await pour appeler importLibrary() depuis une fonction async, comme suit :

  // Import the Places Library for PlaceDetailsElement and PlaceSearchElement
  const {PlaceDetailsElement, PlaceSearchElement} = await google.maps.importLibrary('places');

  // Import the Elevation Library for ElevationElement
  const {ElevationElement} = await google.maps.importLibrary('elevation');

Découvrez comment charger l'API Maps JavaScript.

Étapes suivantes