שילוב Google Maps עם Fluent Forms #

Google Maps משמש להשלמה אוטומטית של שדה הכתובת.

פשוט עברו דרך מדריך זה כדי ללמוד כיצד ליישם תכונה זו בטופס שלכם.

• עברו אל ה-הגדרות גלובליות (Global Settings) מ-Fluent Forms Pro (לוח בקרה WordPress – panel sidebar) והפעילו את שילוב Google Maps, כפי שמוצג בתמונת המסך למטה.

• כאן תתבקשו להזין את המפתח API של Google Maps (Google Map API Key) כדי לשלב אותו.

• כדי להשיג את המפתח API, עליכם להיכנס לכאן.

• לאחר מכן, לחצו על הכפתור התחלה (Get Started) בפינה העליונה הימנית של העמוד. תראו דף לוח בקרה שבו עליכם ללחוץ על אפשרות הפרויקט הקיים שלכם. או ליצור פרויקט חדש על ידי לחיצה על אפשרות זו כמו זו המוצגת להלן –

• תופיע תיבת קופץ שבה עליכם ללחוץ על הפרויקט החדש (NEW PROJECT) כדי ליצור פרויקט חדש.

• כדי ליצור פרויקט חדש, עליכם להוסיף שם פרויקט (Project Name). לאחר מכן לחצו על הכפתור ליצור (Create).

• זה יחזיר אתכם לדף לוח הבקרה, שם תלחצו על אפשרות הפרויקט שלכם כדי לפתוח את רשימת הפרויקטים.

• תופיע תיבת קופץ המציגה את רשימת הפרויקטים, כאן לחצו על הפרויקט המפות Google שלי (My Google Map) שנוצר בעבר.

• כעת, עליכם לבחור את אפשרויות ממשק ה-API של מקומות (Places API) ו-ממשק JavaScript של מפות (Maps Javascript API), בהתאמה.

• כאשר תלחצו על ממשק ה-API של מקומות (Places API), ודאו ללחוץ על הכפתור הפעלה (Enable) כדי להפעיל את ממשק ה-API.

• השלב הבא הוא לחיצה על אפשרות ממשק JavaScript של מפות (Maps Javascript API).

• באותו אופן, לחצו על הפעלה (Enable) כדי להפעיל את ממשק ה-API.

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

• לאחר מכן לחצו על אפשרות שלוש הקווים בצד שמאל.

• לאחר מכן לחצו על אפשרות ממשקי ה-API וממשקים (API & Services) ואחריה על אפשרות אישורים (Credentials) גם כן.

• כאן, עליכם ללחוץ על אפשרות יצירת אישורים (Create Credentials).

• ומהתפריט הנפתח, בחרו את אפשרות מפתח API (API Key).

• תופיע תיבת קופץ שבה תוכלו להעתיק את מפתח ממשק ה-API.

• כעת, חזרו אל הגדרות שילוב Google Maps של Fluent Forms והדביקו את מפתח ממשק ה-API בשדה הקלט.

• אל תשכחו ללחוץ על הכפתור שמור הגדרות (Save Settings).

• עברו אל לוח בקרה Fluent Forms (Fluent Forms לוח הבקרה) וצרו טופס חדש.

• לאחר מכן, תוכלו להוסיף שדה כתובת (Address Field) לטופס.

• לאחר מכן בהתאמה אישית של קלט שדה הכתובת, סמנו את הפעלת השלמה אוטומטית (Enable Autocomplete) (Google Map) & רשימת אפשרויות כלשהן תופיע לאחר מכן.

• הצג מפה (Show Map): אם אתם רוצים להציג את אפשרות Google Maps בטופס שלכם, תוכלו לסמן את אפשרות הפעלת מפה (Enable Map) (Google Map).
• שמור קואורדינטות (Save Coordinates): הפעילו את אפשרות ראו את מיקום המשתמש במפה (See User Location on Map) (קו רוחב וקו אורך – Latitude & Longitude) כדי לשמור את קואורדינטות המיקום של משתמשיכם. תוכלו לראות קואורדינטות אלה מאוחר יותר בערכים של הטופס.

• אתר אוטומטי (Auto locate): אפשרות האתר האוטומטי תציג את מיקום המשתמש אם מישהו יגיש לטופס. שלוש אפשרויות זמינות כאן: טעינת עמוד (Page Load), בעת לחיצה (On Click) & השבת (Disable).

כאשר המפה מופעלת, אנא הפעילו ממשק Geocoding API אם אתם רוצים למלא את הכתובת לאחר סיום גרירת סמן המפה.

• טעינת עמוד (Page Load): כאשר תבחרו את אפשרות טעינת עמוד (Page Load), ברגע שהעמוד טוען, מיקום המשתמש יתגלה מייד.

• בעת לחיצה (On Click): אם תבחרו את אפשרות בעת לחיצה (On Click), סמל לחיצה (Click icon) יופיע ליד תיבת הכתובת. מיקום המשתמשים יתחיל להתגלות לאחר לחיצה על סמל זה.

• השבת (Disable): תוכלו לבחור את אפשרות ההשבת (Disable) אם אתם רוצים להשבית את אפשרות האתר האוטומטי (Auto Locate).

• שמרו את הטופס ולחצו על אפשרות תצוגה וקיצוב (Preview & Design) כדי לצפות בטופס.

• ברגע שתקלידו ביטוי של כל מקום בטופס, זה יציג באופן אוטומטי הצעות לכתובות ספציפיות שתוכלו לבחור מהן. –

• לאחר הפעלת תכונת שמור קואורדינטות (Save Coordinates), תוכלו לצפות במיקום שנשמר של המשתמש בערכי הטופס, כפי שמוצג בתמונת המסך להלן.