reviewsהשקת Places UI Kit: ספריית רכיבים מוכנה לשימוש בעלות נמוכה, שמאפשרת לכם להוסיף לכל מפה שתבחרו את ממשק המשתמש המוכר של 'מקומות' במפות Google. כדאי לנסות אותו ולשלוח לנו משוב כדי לעזור לנו לעצב את העתיד של GMP.
כדי לטעון את הספריות שתומכות ב-Places UI Kit, קודם צריך לטעון את Maps JavaScript API על ידי הוספת מערך הטעינה של Bootstrap לקוד האפליקציה, כפי שמתואר בקטע הקוד הבא:
<script>
(g=>{varh,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});vard=b.maps||(b.maps={}),r=newSet,e=newURLSearchParams,u=()=>h||(h=newPromise(async(f,n)=>{await(a=m.createElement("script"));e.set("libraries",[...r]+"");for(king)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 PlaceSearchElementconst{PlaceDetailsElement,PlaceSearchElement}=awaitgoogle.maps.importLibrary('places');// Import the Elevation Library for ElevationElementconst{ElevationElement}=awaitgoogle.maps.importLibrary('elevation');
[[["התוכן קל להבנה","easyToUnderstand","thumb-up"],["התוכן עזר לי לפתור בעיה","solvedMyProblem","thumb-up"],["סיבה אחרת","otherUp","thumb-up"]],[["חסרים לי מידע או פרטים","missingTheInformationINeed","thumb-down"],["התוכן מורכב מדי או עם יותר מדי שלבים","tooComplicatedTooManySteps","thumb-down"],["התוכן לא עדכני","outOfDate","thumb-down"],["בעיה בתרגום","translationIssue","thumb-down"],["בעיה בדוגמאות/בקוד","samplesCodeIssue","thumb-down"],["סיבה אחרת","otherDown","thumb-down"]],["עדכון אחרון: 2025-07-09 (שעון UTC)."],[[["\u003cp\u003eTo use the Places UI Kit, you must create a Cloud project, enable the Places UI Kit, and obtain an API key.\u003c/p\u003e\n"],["\u003cp\u003eThe Maps JavaScript API needs to be loaded using the inline bootstrap loader, including your API key and desired version.\u003c/p\u003e\n"],["\u003cp\u003eUtilize the \u003ccode\u003eimportLibrary()\u003c/code\u003e function to load specific libraries like \u003ccode\u003eplaces\u003c/code\u003e and \u003ccode\u003eelevation\u003c/code\u003e for using elements like \u003ccode\u003ePlaceDetailsElement\u003c/code\u003e, \u003ccode\u003ePlaceListElement\u003c/code\u003e, and \u003ccode\u003eElevationElement\u003c/code\u003e.\u003c/p\u003e\n"]]],["To use the Places UI Kit, first create a Cloud project with billing and enable the Places UI Kit. Obtain an API key for access. Load supporting libraries by adding the Maps JavaScript API's inline bootstrap loader to your code. Utilize the `importLibrary()` function within an `async` function to import libraries like 'places' and 'elevation', then you can use the `PlaceDetailsElement`, `PlaceListElement`, and `ElevationElement`.\n"],null,[]]