Rozpocznij

Deweloperzy z Europejskiego Obszaru Gospodarczego (EOG)

Na tej stronie dowiesz się, jak uzyskać klucz interfejsu API, włączyć wymagane interfejsy API i wczytać bibliotekę Places, aby móc pracować z klasą Place.

Uzyskiwanie klucza interfejsu API i włączanie wymaganych interfejsów API

Zanim zaczniesz używać klasy Place, musisz:

  • Utwórz projekt Cloud z kontem rozliczeniowym.
  • Pobierz klucz interfejsu API.
  • Włącz te interfejsy API:
    • Maps JavaScript API
    • Places API
    • Places API (nowość) (wymagane do korzystania z wyszukiwania tekstowego (nowość) i autouzupełniania miejsc)

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

Uzyskiwanie klucza interfejsu API

Włączanie interfejsu Places API (nowy)

Wczytywanie biblioteki Miejsc

Aby wczytać bibliotekę Places Library, najpierw wczytaj interfejs Maps JavaScript API, dodając do kodu aplikacji wbudowany ładownik bootstrap, 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, jak pokazano tutaj:

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

Funkcja może też wczytywać biblioteki bez deklarowania zmiennej dla potrzebnych klas:

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

  initMap();

Możesz też wczytać biblioteki bezpośrednio w HTML-u:

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

Więcej informacji o wczytywaniu bibliotek znajdziesz w artykule Wczytywanie interfejsu Maps JavaScript API.

Dalsze kroki