Inizia a utilizzare il Kit UI di Places

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

Ottieni una chiave API e attiva il kit UI di Places

Prima di utilizzare l'UI Kit di Places, devi:

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

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

Attivare Places UI Kit

Ottieni una chiave API

Carica le librerie richieste

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