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

הפלטפורמה: Android iOS JavaScript

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

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

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

  • יוצרים פרויקט ב-Cloud עם חשבון לחיוב.
  • מפעילים את ערכת ממשק המשתמש של Places.
  • מקבלים מפתח API.

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

הפעלת Places UI Kit

קבלת מפתח API

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

כדי לטעון את הספריות שתומכות בערכת הכלים לממשק המשתמש של 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');

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

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

השלבים הבאים