Places UI Kit'i kullanmaya başlama

Platform seçin: Android iOS JavaScript

Bu sayfada, API anahtarı alma, Places UI Kit'i etkinleştirme ve destekleyen kitaplıkları yükleme işlemleri açıklanmaktadır.

API anahtarı alma ve Places UI Kit'i etkinleştirme

Places UI Kit'i kullanmadan önce şunları yapmanız gerekir:

  • Faturalandırma hesabı olan bir Cloud projesi oluşturun.
  • Places UI Kit'i etkinleştirin.
  • API anahtarı alın.

Daha fazla bilgi için Google Cloud projenizi ayarlama başlıklı makaleyi inceleyin.

Places UI Kit'i etkinleştirme

API anahtarı alma

Gerekli kitaplıkları yükleyin

Yerler UI Kit'ini destekleyen kitaplıkları yüklemek için önce aşağıdaki snippet'te gösterildiği gibi satır içi bootstrap yükleyiciyi uygulama kodunuza ekleyerek Maps JavaScript API'yi yükleyin: 

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

Ardından, await operatörünü kullanarak importLibrary() işlevini async işlevi içinden şu şekilde çağırın:

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

Maps JavaScript API'yi yükleme hakkında daha fazla bilgi edinin.

Sonraki adımlar