Yerler kullanıcı arayüzü kitini kullanmaya başlama (Deneysel)

Bu sayfada, API anahtarı alma, Yerler kullanıcı arayüzü kitini etkinleştirme ve bu kiti destekleyen kitaplıkları yükleme hakkında bilgi verilmektedir.

API anahtarı alma ve Places kullanıcı arayüzü araç setini etkinleştirme

Yerler kullanıcı arayüzü kitini kullanmadan önce:

  • Faturalandırma hesabı içeren bir Cloud projesi oluşturun.
  • Places kullanıcı arayüzü kitini etkinleştirin.
  • API anahtarı alın.

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

Yerler kullanıcı arayüzü kitini etkinleştirme

API anahtarı alma

Gerekli kitaplıkları yükleme

Yerler kullanıcı arayüzü kitini destekleyen kitaplıkları yüklemek için öncelikle uygulama kodunuza aşağıdaki snippet'te gösterildiği gibi satır içi önyükleme yükleyiciyi 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: "alpha",
      // 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, async işlevi içinden importLibrary() işlevini çağırmak için await operatörünü şu şekilde kullanın:

  // Import the Places Library for PlaceDetailsElement and PlaceListElement
  const {PlaceDetailsElement, PlaceListElement} = 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