Pierwsze kroki z pakietem UI do Miejsc

Wybierz platformę: Android iOS JavaScript

Na tej stronie dowiesz się, jak uzyskać klucz API, włączyć pakiet UI Places i wczytać biblioteki, które go obsługują.

Uzyskiwanie klucza interfejsu API i włączanie interfejsu Places UI Kit

Zanim zaczniesz korzystać z interfejsu Places UI Kit:

  • Utwórz projekt Cloud z kontem rozliczeniowym.
  • Włącz interfejs Places UI Kit.
  • Uzyskaj klucz interfejsu API.

Więcej informacji znajdziesz w artykule Konfigurowanie projektu Google Cloud.

Włączanie Places UI Kit

Pobieranie klucza interfejsu API

Wczytywanie wymaganych bibliotek

Aby wczytać biblioteki obsługujące pakiet UI Places, najpierw wczytaj interfejs Maps JavaScript API, dodając do kodu aplikacji wbudowany program do wczytywania początkowego, jak pokazano w tym fragmencie kodu: 

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

Następnie użyj operatora await, aby wywołać importLibrary() w funkcji async w ten sposób:

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

Więcej informacji o wczytywaniu interfejsu Maps JavaScript API

Dalsze kroki