בדף הזה נסביר איך לקבל מפתח API, להפעיל את Places UI Kit ולטעון את הספריות שתומכות בו.
קבלת מפתח API והפעלת ערכת הכלים לבניית ממשק משתמש של מפות Google
לפני שמשתמשים ב-Places UI Kit, צריך:
- יוצרים פרויקט ב-Cloud עם חשבון לחיוב.
- מפעילים את ערכת הכלים של ממשק המשתמש של Places.
- מקבלים מפתח API.
מידע נוסף זמין במאמר הגדרת פרויקט ב-Google Cloud.
טעינת הספריות הנדרשות
כדי לטעון את הספריות שתומכות ב-Places UI Kit, קודם צריך לטעון את 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: "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>
בשלב הבא, משתמשים באופרטור await כדי להפעיל את importLibrary()
מתוך פונקציית async, באופן הבא:
// 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