Inizia

Questa pagina mostra come ottenere una chiave API, abilitare le API richieste e caricare la libreria Places per poter utilizzare la classe Place.

Ottieni una chiave API e abilita le API richieste

Prima di utilizzare la classe Place, devi:

  • Crea un progetto Cloud con un account di fatturazione.
  • Ottieni una chiave API.
  • Abilita le seguenti API:
    • API Maps JavaScript
    • API Places
    • API Places (novità) (obbligatoria per utilizzare Text Search (novità) e Place Autocomplete)

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

Ottieni una chiave API

Abilita l'API Places (novità)

Caricare la libreria Places

Per caricare la libreria Places, carica prima l'API Maps JavaScript aggiungendo il caricatore di bootstrap in linea al codice dell'applicazione, come mostrato nello snippet seguente: 

<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() all'interno di una funzione async, come mostrato di seguito:

  const {Place} = await google.maps.importLibrary("places");

La funzione può anche caricare le librerie senza dichiarare una variabile per le classi necessarie:

  async function initMap() {
    google.maps.importLibrary("places");
    ...
  }

  initMap();

In alternativa, puoi caricare le librerie direttamente in HTML come mostrato di seguito:

  <script>
  google.maps.importLibrary("places");
  </script>

Per ulteriori informazioni sul caricamento delle librerie, consulta Caricare l'API Maps JavaScript.

Passaggi successivi