סקירה כללית
הפלטפורמה של מפות Google זמינה לאינטרנט (JS, TS), Android ו-iOS. וגם מציע ממשקי API של שירותי אינטרנט לקבלת מידע על מקומות, מסלולים, ומרחקים. הדוגמאות במדריך הזה כתובות לפלטפורמה אחת, אבל קישורים למסמכים זמינים להטמעה בפלטפורמות אחרות.
Fast Builder (יצירה מהירה) מסוף Google Cloud מאפשר לכם לבנות טופס כתובת באופן אוטומטי באמצעות ממשק משתמש אינטראקטיבי שמפיק קוד JavaScript בשבילכם.
קניות והזמנה באינטרנט הפכו לחלק חשוב מחיינו. מיום הקנייה שירותי משלוחים להזמנת מונית או להזמנת ארוחת ערב, הלקוחות כבר מצפים תהליך תשלום חלק,
עם זאת, בכל האפליקציות האלו יש להזין כתובת מכשולים אחדים בתהליך התשלום יכולים להיות בעיה של חיוב או משלוח רבים ומסורבלים. חשוב עוד יותר ליהנות מחוויית תשלום חלקה בעולם המכשירים הניידים, שבו הזנת טקסט מורכבת במסך קטן עלולה להיות מתסכלת מכשול נוסף בדרך להמרה של לקוחות.
בנושא הזה נסביר איך להטמיע מודעות כדי לעזור ללקוחות שלכם לעבור במהירות תהליך תשלום באמצעות הזנה של כתובת חזויה.
בתרשים הבא מוצגים ממשקי ה-API העיקריים שנדרשים להטמעת Google Checkout. (יש ללחוץ כדי להגדיל).
![](https://google-developers.gonglchuangl.net/static/maps/solutions/images/checkout/checkout_arch_diagram.png?authuser=0&hl=he)
הפעלת ממשקי API
כדי להטמיע את Checkout, צריך להפעיל את ממשקי ה-API הבאים במסוף Google Cloud:
מידע נוסף על ההגדרה זמין במאמר תחילת העבודה עם הפלטפורמה של מפות Google.
הקטעים של שיטות העבודה
בהמשך מפורטים הטיפים וההתאמות האישיות שנעסוק בהן בנושא זה.
- סמל סימן הווי הוא שיטה מרכזית.
- סמל הכוכב הוא התאמה אישית אופציונלית אבל מומלצת ישפרו את הפתרון.
הוספת השלמה אוטומטית לשדות להזנת קלט | מילוי אוטומטי של טופס כתובת. אפשר להוסיף פונקציונליות של 'הקלדה בזמן' כדי לשפר את המשתמש בכל הפלטפורמות ולשפר את דיוק הכתובות בהקשות מינימליות. | |
הצגת אישור חזותי באמצעות Maps Static API | מצאו את הקואורדינטות של קו הרוחב/קו האורך עבור כתובת נתונה (קידוד גיאוגרפי), או להמיר את קווי האורך והרוחב של מיקום גיאוגרפי כתובת (היפוך קידוד גיאוגרפי). | |
טיפים לשיפור Google Checkout | השתמשו בתכונות המתקדמות של השלמה אוטומטית לגבי מקומות כדי ליהנות מחוויית תשלום עוד יותר טוב. |
הוספת ההשלמה האוטומטית לשדות להזנת קלט
בדוגמה הזו: ספריית מקומות, Maps JavaScript API | זמין גם: Android | iOS |
השלמה אוטומטית במקומות יכולה לפשט את הזנת הכתובות באפליקציה, וכך להשיג שיעורי המרה גבוהים יותר חוויה חלקה ללקוחות שלכם. ההשלמה האוטומטית מספקת שדה כניסה מהיר אחד עם 'type-ahead' חיזוי כתובת שיכול לשמש לאכלוס אוטומטי של נתוני חיוב או טופס כתובת למשלוח.
על ידי שילוב ההשלמה האוטומטית של המקום בעגלת הקניות באינטרנט, תוכלו:
- לצמצם שגיאות בהזנת הכתובת.
- מפחיתים את מספר השלבים בתהליך התשלום בקופה.
- תהליך הזנת הכתובת יהיה פשוט יותר במכשירים ניידים או במכשירים לבישים.
- להפחית באופן משמעותי את ההקשות ואת הזמן הכולל שנדרש ללקוח כדי לבצע הזמנה.
כשהמשתמש בוחר בתיבת הערך של 'השלמה אוטומטית' ומתחיל להקליד, תוצג לו רשימת כתובות מופיעים חיזויים:
![](https://google-developers.gonglchuangl.net/static/maps/solutions/images/checkout/places_autocomplete_suggest.png?authuser=0&hl=he)
כשהמשתמש בוחר כתובת מרשימת החיזויים, אפשר להשתמש בתשובה כדי: לאמת את הכתובת ולמצוא את המיקום. לאחר מכן האפליקציה יכולה לאכלס את השדות הנכונים של טופס הזנת הכתובת:
![](https://google-developers.gonglchuangl.net/static/maps/solutions/images/checkout/autocomplete_form.png?authuser=0&hl=he)
סרטונים: שיפור טופסי כתובת באמצעות השלמה אוטומטית של מקומות:
טופסי כתובת
פיתוח אתרים
Android
iOS
תחילת העבודה עם השלמה אוטומטית של מקומות
נדרשות רק כמה שורות של קוד JavaScript כדי לשלב את Place Autcomplete ב- באתר שלך.
הדרך הקלה ביותר היא לכלול את ממשק ה-API של JavaScript של מפות Google (גם אם לא מציגה מפה) באתר שלך ולציין את ספריית 'מקומות' כפי שמוצג בדוגמה הבאה, שמריצים גם את פונקציית האתחול.
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=places&callback=initAutocomplete&solution_channel=GMP_guides_checkout_v1_a">
</script>
בשלב הבא, מוסיפים תיבת טקסט לדף כדי להזין את הקלט של המשתמשים:
<input id="autocomplete" placeholder="Enter your address"></input>
בשלב האחרון, מפעילים את שירות ההשלמה האוטומטית ומקשרים אותו לתיבת הטקסט בעלת השם:
function initAutocomplete() {
// Create the autocomplete object, restricting the search predictions to
// addresses in the US and Canada.
autocomplete = new google.maps.places.Autocomplete(address1Field, {
componentRestrictions: { country: ["us", "ca"] },
fields: ["address_components", "geometry"],
types: ["address"],
});
address1Field.focus();
// When the user selects an address from the drop-down, populate the
// address fields in the form.
autocomplete.addListener("place_changed", fillInAddress);
}
בדוגמה הקודמת, ה-event listener place_changed
מופעל כאשר
המשתמש בוחר חיזוי כתובת,
הפונקציה fillInAddress
מופעלת.
הפונקציה, כמו בדוגמה הבאה, לוקחת את התשובה שנבחרה ו
מחלץ את רכיבי הכתובת כדי להציג אותם בתוך טופס.
TypeScript
function fillInAddress() { // Get the place details from the autocomplete object. const place = autocomplete.getPlace(); let address1 = ""; let postcode = ""; // Get each component of the address from the place details, // and then fill-in the corresponding field on the form. // place.address_components are google.maps.GeocoderAddressComponent objects // which are documented at http://goo.gle/3l5i5Mr for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) { // @ts-ignore remove once typings fixed const componentType = component.types[0]; switch (componentType) { case "street_number": { address1 = `${component.long_name} ${address1}`; break; } case "route": { address1 += component.short_name; break; } case "postal_code": { postcode = `${component.long_name}${postcode}`; break; } case "postal_code_suffix": { postcode = `${postcode}-${component.long_name}`; break; } case "locality": (document.querySelector("#locality") as HTMLInputElement).value = component.long_name; break; case "administrative_area_level_1": { (document.querySelector("#state") as HTMLInputElement).value = component.short_name; break; } case "country": (document.querySelector("#country") as HTMLInputElement).value = component.long_name; break; } } address1Field.value = address1; postalField.value = postcode; // After filling the form with address components from the Autocomplete // prediction, set cursor focus on the second address line to encourage // entry of subpremise information such as apartment, unit, or floor number. address2Field.focus(); }
JavaScript
function fillInAddress() { // Get the place details from the autocomplete object. const place = autocomplete.getPlace(); let address1 = ""; let postcode = ""; // Get each component of the address from the place details, // and then fill-in the corresponding field on the form. // place.address_components are google.maps.GeocoderAddressComponent objects // which are documented at http://goo.gle/3l5i5Mr for (const component of place.address_components) { // @ts-ignore remove once typings fixed const componentType = component.types[0]; switch (componentType) { case "street_number": { address1 = `${component.long_name} ${address1}`; break; } case "route": { address1 += component.short_name; break; } case "postal_code": { postcode = `${component.long_name}${postcode}`; break; } case "postal_code_suffix": { postcode = `${postcode}-${component.long_name}`; break; } case "locality": document.querySelector("#locality").value = component.long_name; break; case "administrative_area_level_1": { document.querySelector("#state").value = component.short_name; break; } case "country": document.querySelector("#country").value = component.long_name; break; } } address1Field.value = address1; postalField.value = postcode; // After filling the form with address components from the Autocomplete // prediction, set cursor focus on the second address line to encourage // entry of subpremise information such as apartment, unit, or floor number. address2Field.focus(); } window.initAutocomplete = initAutocomplete;
אחרי שיתקבלו הנתונים האלה, תוכלו להשתמש בהם ככתובת התואמת עבור המשתמש שלכם. מכמה תוכלו לוודא שהלקוח יזין את הכתובת הנכונה תוך זמן קצר בזמן האימון.
הצגת הדגמה פעילה וקוד מקור מלא לאכלוס טופס הזנת כתובת בטופס הזה קוד דוגמה.
שיקולים בעת הטמעת השלמה אוטומטית של מקומות
ההשלמה האוטומטית של המקום כוללת כמה אפשרויות שמאפשרות גמישות אם רוצים להשתמש ברכיבים נוספים מלבד הווידג'ט. אפשר להשתמש בשילוב של כדי לקבל בדיוק את מה שצריך כדי להתאים מיקום בדרך הנכונה.
-
בטופס כתובת, צריך להגדיר את הפרמטר
types
לערךaddress
בתור להגביל את ההתאמות לכתובות רחובות שלמות. מידע נוסף על סוגים נתמכים בבקשות להשלמה אוטומטית של Place. -
להגדיר את ההגבלות המתאימות
ובדעות קדומות, אם אתם לא צריכים לחפש בכל העולם. יש כמה פרמטרים
ישמשו להטיה או להגבלה של כל התאמה לאזורים ספציפיים בלבד.
-
אפשר להשתמש ב-
bounds
כדי להגדיר גבולות מלבניים להגבלת אזור מסוים, צריך להשתמשstrictBounds
כדי לוודא שיוחזרו רק כתובות באזורים האלה. -
אפשר להשתמש בפונקציה
componentRestrictions
כדי להגביל את התגובות לקבוצה מסוימת של מדינות.
-
אפשר להשתמש ב-
- משאירים את השדות ניתנים לעריכה במקרה ששדות מסוימים לא נכללים בהתאמה, ומאפשרים ללקוחות כדי לעדכן את הכתובת לפי הצורך. מאחר שרוב הכתובות שהוחזרו על ידי השלמה אוטומטית של מקומות לא מכילים מספרי משנה כמו מספר דירה, סוויטה או יחידה. מעביר את המיקוד לשורת כתובת 2 כדי לעודד את המשתמש למלא אם יש צורך.
מתן אישור חזותי באמצעות ממשק ה-API של מפות Google
לאחר הזנת הכתובת, ספקו למשתמש אישור חזותי למשלוח או לאיסוף, באמצעות מפה סטטית פשוטה. הפעולה הזו תציע ללקוח הבטחה נוספת הכתובת נכונה, וכך יפחיתו את מספר הכשלים במסירה או באיסוף. ניתן להציג את המפה הסטטית בדף שבו הם הזינו את הכתובת או אפילו נשלחו בהודעת האישור באימייל כשהם השלימו את העסקה.
אפשר להשיג את שני התרחישים האלה באמצעות API סטטי של מפות Google, שמוסיף גרסת תמונה של המפה לכל תג תמונה בדף או באימייל.
![](https://google-developers.gonglchuangl.net/static/maps/solutions/images/checkout/track_package.png?authuser=0&hl=he)
תחילת העבודה עם ה-API הסטטי של מפות Google
אפשר להשתמש ב-API הסטטי של מפות Google באמצעות קריאה לשירות אינטרנט, הפעולה תיצור גרסת תמונה של מפה בהינתן הפרמטרים שאתם מציינים. בדומה למפה הדינמית, הוא יכול לציין את סוג המפה, להשתמש באותם סגנונות מבוססי-ענן ולהוסיף סמנים כדי להבחין בין המיקום.
הקריאה הבאה מציגה מפת דרכים, בגודל של 600x300 פיקסלים, שמתמקדת ב-Googleplex במאונטיין ויו, קליפורניה, ברמת זום 13. הוא גם מציין מיקום משלוח כחול סמן וסגנון מפה מקוון.
https://maps.googleapis.com/maps/api/staticmap?center=37.422177,-122.084082
&zoom=13
&size=600x300
&maptype=roadmap
&markers=color:blue%7Clabel:S%7C37.422177,-122.084082
&map_id=8f348d1b5a61d4bb
&key=YOUR_API_KEY
&solution_channel=GMP_guides_checkout_v1_a
המידע הזה מחולק לקטעים הבאים:
כתובת ה-URL של ה-API | https://maps.googleapis.com/maps/api/staticmap? |
מרכז המפה | center=37.422177,-122.084082 |
מרחק התצוגה | זום=13 |
גודל תמונה | גודל=600x300 |
סוג המפה | maptype=roadmap |
סמנים של מיקום החנות | markers=color:blue%7Clabel:C%7C37.422177,-122.084082 |
סגנון מפת העננים | map_id=8f348d1b5a61d4bb |
מפתח API | key=YOUR_API_KEY |
פרמטר של ערוץ פתרונות (ראו את תיעוד פרמטרים) | solution_channel=GMP_guides_checkout_v1_a |
זו תהיה התמונה שמוצגת כאן:
![](https://google-developers.gonglchuangl.net/static/maps/solutions/images/checkout/static_map.png?authuser=0&hl=he)
למידע נוסף על אפשרויות ה-API הסטטי של מפות Google, ניתן לעיין במאמר מסמכי התיעוד.
טיפים לשיפור Google Checkout
כדי לשפר עוד יותר את חוויית הלקוח, אפשר להיעזר בכמה שיש להשלמה אוטומטית של מקומות. ריכזנו כאן כמה טיפים שיעזרו לך לשפר את תיבת הזנת הכתובת להשלמה אוטומטית:
-
פרטי מקום.
כדי לאפשר הזנה גם של כתובות וגם שמות של מקומות, צריך להסיר את
מאפיין
types
מהגדרת ההשלמה האוטומטית.
המשתמשים יכולים להזין כתובת שמבוססת על שם של עסק או של נקודת עניין.
"הקלדה קדימה" שירות החיזוי פועל לא רק עבור כתובות, אלא גם תוכל לבחור
אפשר להזין שמות של עסקים או ציוני דרך. אחרי שמשתמש מזין שם עסק, הוא ודאי
קל לאחזר את הכתובת באמצעות קריאה אל
- נקרא את התיעוד. להתאים אישית את העיצוב והסגנון של התיבה 'השלמה אוטומטית של מקומות' בסגנון של האתר. אפשר גם לעצב את הווידג'ט של ההשלמה האוטומטית כך שיתאים למראה ולחוויה שהאתר מציע. אפשר להתאים אישית קבוצה של מחלקות CSS. מידע נוסף על לעצב את תיבת ההשלמה האוטומטית
- JavaScript, Android, ו-iOS וכן קריאה ישירה ל-API של שירותי האינטרנט באמצעות Places API. אם רוצים ליצור ממשק משתמש בהתאמה אישית. על ידי יצירת ממשק משתמש מותאם אישית במקום להשתמש בממשק המשתמש ש-Google יצרה, קראו מיקום של שירות ההשלמה האוטומטית באופן פרוגרמטי כדי לאחזר חיזויים לקלט נתון. ניתן לאחזר באופן פרוגרמטי חיזויים להשלמה אוטומטית של מקום ב: