Inizia a utilizzare il Kit UI di Places

Seleziona la piattaforma: Android iOS JavaScript

Questa pagina mostra come ottenere una chiave API, abilitare Places UI Kit e caricare le librerie che lo supportano.

Ottieni una chiave API e attiva Places UI Kit

Prima di utilizzare Places UI Kit, devi:

  • Crea un progetto Cloud con un account di fatturazione.
  • Attiva Places UI Kit.
  • Ottieni una chiave API.

Per saperne di più, vedi Configurare il progetto Google Cloud.

Attivare Places UI Kit

Recuperare una chiave API

Carica le librerie richieste

Per caricare le librerie che supportano Places UI Kit, carica prima l'API Maps JavaScript aggiungendo il caricatore bootstrap incorporato al codice dell'applicazione, come mostrato nel seguente snippet: 

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

Successivamente, utilizza l'operatore await per chiamare importLibrary() dall'interno di una funzione async, come segue:

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

Scopri di più sul caricamento dell'API Maps JavaScript.

Passaggi successivi