Pierwsze kroki z pakietem UI do Miejsc

Na tej stronie dowiesz się, jak uzyskać klucz API, włączyć zestaw interfejsu użytkownika Miejsca i wczytać biblioteki, które go obsługują.

Uzyskiwanie klucza interfejsu API i włączanie narzędzia interfejsu użytkownika Places

Zanim zaczniesz korzystać z interfejsu Places UI Kit, musisz:

  • Utwórz projekt Cloud z kontem rozliczeniowym.
  • Włącz zestaw interfejsu użytkownika Miejsca.
  • Pobierz klucz interfejsu API.

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

Włączanie zestawu interfejsu Places UI Kit

Pobieranie klucza interfejsu API

Wczytaj wymagane biblioteki

Aby wczytać biblioteki obsługujące zestaw interfejsu użytkownika Miejsca, najpierw wczytaj interfejs Maps JavaScript API, dodając do kodu aplikacji wbudowany program inicjujący, 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ć funkcję 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');

  // Import the Elevation Library for ElevationElement
  const {ElevationElement} = await google.maps.importLibrary('elevation');

Więcej informacji o wczytywaniu interfejsu Maps JavaScript API

Dalsze kroki