Inizia a utilizzare il Kit UI di Places

Seleziona la piattaforma: Android iOS JavaScript

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

Ottenere una chiave API e attivare Places UI Kit

Prima di utilizzare Places UI Kit, devi:

  • Creare un progetto Cloud con un account di fatturazione.
  • Attivare Places UI Kit.
  • Ottenere una chiave API.

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

Attiva Places UI Kit

Ottieni una chiave API

Caricare le librerie richieste

Per caricare le librerie che supportano Places UI Kit, carica prima l'API Maps JavaScript aggiungendo il caricatore di bootstrap in linea 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>

Quindi, utilizza l'operatore await per chiamare importLibrary() da una funzione async, come segue:

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

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

Passaggi successivi