תחילת העבודה עם Places UI Kit

בחירת פלטפורמה: Android iOS JavaScript

בדף הזה מוסבר איך לקבל מפתח API, להפעיל את Places UI Kit ולטעון את הספריות שתומכות בו.

קבלת מפתח API והפעלת ערכת הכלים לבניית ממשק משתמש של Places

לפני שמשתמשים ב-Places UI Kit, צריך:

  • יוצרים פרויקט בענן עם חשבון לחיוב.
  • מפעילים את Places UI Kit.
  • קבלת מפתח API.

מידע נוסף זמין במאמר בנושא הגדרת פרויקט ב-Google Cloud.

הפעלת Places UI Kit

קבלת מפתח API

טעינה של הספריות הנדרשות

כדי לטעון את הספריות שתומכות בערכת ה-UI של Places, קודם צריך לטעון את Maps JavaScript API על ידי הוספת טוען ה-bootstrap המוטבע לקוד האפליקציה, כמו שמוצג בקטע הקוד הבא:

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

לאחר מכן, משתמשים באופרטור await כדי להפעיל את importLibrary() מתוך הפונקציה async, באופן הבא:

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

מידע נוסף על טעינת Maps JavaScript API

השלבים הבאים