Pierwsze kroki z pakietem UI do Miejsc

Wybierz platformę: Android iOS JavaScript

Z tej strony dowiesz się, jak uzyskać klucz interfejsu API, włączyć Places UI Kit i wczytać biblioteki, które go obsługują.

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

Zanim zaczniesz korzystać z Places UI Kit, musisz:

  • utworzyć projekt w chmurze z kontem rozliczeniowym,
  • włączyć Places UI Kit,
  • uzyskać klucz interfejsu API.

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

Włącz Places UI Kit

Uzyskiwanie klucza interfejsu API

Wczytywanie wymaganych bibliotek

Aby wczytać biblioteki obsługujące (interfejs) Places UI Kit, najpierw wczytaj Maps JavaScript API, dodając do kodu aplikacji wbudowane narzędzie do wczytywania, 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() z poziomu funkcji async w ten sposób:

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

Więcej informacji o wczytywaniu Maps JavaScript API.

Dalsze kroki