הפלטפורמה של מפות Google מאפשרת ללקוחות לפתח חוויות ייחודיות באמצעות התאמה אישית של העיצוב החזותי של הסמנים שלהם במפה באמצעות סמנים מתקדמים. במסמך הזה נסביר איך הלקוחות יכולים להתקדם עוד צעד וליצור סמנים שמשתנים באופן דינמי על סמך נתונים בזמן אמת.
סמני מפה הם כלי שימושי שמספק למשתמשים חוויות מיפוי עשירות. מאפייני סמנים כגון גודל, צביעה וצורה יכולים להעביר מידע נוסף על כל מיקום מסומן. במקרים מסוימים המידע הנוסף הזה עשוי להשתנות באופן דינמי, והמפתח עשוי לרצות שהתצוגה החזותית של המפה תתעדכן כך שהמשתמש ימשיך להיות עדכני.
המאמר הזה מיועד להמחשה בלבד: רשת קמעונאית רוצה להשתמש במפה כדי להציג למשתמשים את זמני ההמתנה של החנות. עם זאת, הארכיטקטורה הזו יכולה לשמש במקרים רבים אחרים. ריכזנו כאן כמה רעיונות נוספים:
- זמינות חדרי מלון: במפה שמציגה תוצאות חיפוש של מלונות, הזמינות של חדרים מתעדכנת היא אות חשוב שיכול לעודד משתמשים להזמין חדר במלון כשהמלאי שלו יורד.
- זמינות של שטח חניה: על גבי מפה של חניונים, מעניקים למשתמשים את הביטחון לבחור יעד עם מרחב חניה כשהם מגיעים אליו.
- מסעדות פתוחות, נסגרות בקרוב וסגורות: במפה שמציגה תוצאות חיפוש של מסעדות, חשוב שהמשתמשים ידעו אם מסעדה עשויה להיסגר.
פתרון סמנים דינמיים מתקדמים
עכשיו נראה איך ליצור מפה באמצעות סמנים מתקדמים כדי להציג נתונים דינמיים באופן חזותי. כפי שצוין קודם, התרחיש לדוגמה הוא רשת של חנויות קמעונאיות שממנפות את המערכת לניהול תורים לתשלום בקופה כדי להעריך את זמני ההמתנה של המשתמשים ולהציג אותם באופן חזותי. זוהי הארכיטקטורה של האפליקציה:
שלב 1 – קביעת המאפיינים להגדרת החוויה החזותית
השלב הראשון הוא לקבוע אחד או יותר ממאפייני המיקום שיוצגו למשתמשים. במקרה הזה אנחנו רוצים להציג רק מאפיין אחד: זמן ההמתנה הנוכחי בכל מיקום של חנות, שנמדד בדקות.
השלב הבא הוא לבחור מאפיין מתאים אחד או יותר של סמן כדי להוסיף הערות חזותיות של זמן ההמתנה בסמן המפה. רשימת מאפייני הסמנים זמינה מוכנה מראש במפרט של PinElement. ניתן גם להשתמש ב-HTML מותאם אישית לקבלת אפשרויות עשירות יותר להתאמה אישית.
בדוגמה זו נשתמש בשני מאפייני סמנים כדי להמחיש את נתוני זמן ההמתנה:
- צבע סמן: כחול למשך זמן המתנה של פחות מ-5 דקות, צהוב למשך יותר מ-5 דקות
- תוכן הסמן (נדרש סמני HTML מותאמים אישית): אנחנו נכלול את זמן ההמתנה הנוכחי בדקות בסמן עצמו
שלב 2 – הגדרת החיבור למקורות נתונים בזמן אמת
יש כמה דרכים להתחבר למקורות נתונים, והפתרון המתאים תלוי בתרחיש לדוגמה ובתשתית הטכנית. בדוגמה הזו אנחנו משתמשים בגישת משיכה, שבה אנחנו מבקשים את נתוני זמן ההמתנה המעודכנים דרך בקשות HTTP (REST) על בסיס קבוע. בקטעים הבאים נציג ארכיטקטורות חלופיות שממנפות גישות של דחיפה.
כדי לאפשר לאפליקציה שלנו לגשת לנתוני זמן ההמתנה מהשרת, הארכיטקטורה שלנו משתמשת ב-Cloud Functions for Firebase. בעזרת Cloud Functions אנחנו יכולים להגדיר פונקציה של קצה עורפי כדי לגשת לנתונים האלה ולחשב אותם. אנחנו כוללים גם את ספריית Firebase באפליקציית האינטרנט שלנו, וכך אנחנו יכולים לגשת לפונקציה של Cloud Functions באמצעות בקשת HTTP.
השלב הבא הוא להבטיח שהנתונים יישארו עדכניים בשביל המשתמש. לשם כך, אנחנו מגדירים טיימר באמצעות פונקציית setInterval של JavaScript עם זמן קצוב לתפוגה של 30 שניות. בכל פעם שהטיימר מופעל, אנחנו מבקשים נתונים מעודכנים של זמן ההמתנה כפי שמתואר למעלה. אחרי שנקבל את הנתונים החדשים, עלינו לרענן את המראה של סמני המפה. בשלב הבא נסביר איך לבצע את השינויים האלה.
שלב 3 – עיבוד סמני המפה
עכשיו אנחנו יכולים להשתמש בסמנים מתקדמים כדי לעבד את הסמנים המסוגננים במפה. ניתן לעבד סמנים מתקדמים במפות שנוצרו על ידי API ל-JavaScript של מפות Google. כשמשתמשים בסמנים מתקדמים, חשוב לכלול את הפרמטר של מזהה המפה בבקשת המפה של JS.
בקטע הקוד המוצג למטה, אנו יוצרים את הסמנים ומגדירים את תוכן הסמן על ידי יצירת רכיב HTML div:
// Create the content div for the marker
storeWaitLabels[store_index] = document.createElement("div");
// Create the marker
markers.push(new google.maps.marker.AdvancedMarkerElement({
map,
position: { lat: latlngs[store_index][0], lng: latlngs[store_index][1] },
content: storeWaitLabels[store_index]
}));
השלב האחרון הוא לעדכן את הטקסט של הסמן ואת סגנון ה-CSS עבור כל חנות. הקוד שבהמשך קורא את הנתונים של זמני ההמתנה המעודכנים ומקצה סגנון לכל סיכה של חנות בהתאם לזמן ההמתנה:
// Update the visual appearcance of a map marker
storeWaitLabels[store_index].textContent = waitTimes[store_index] + " min";
if (waitTimes[store_index] > 5)
storeWaitLabels[store_index].className = "wait-over-5";
else storeWaitLabels[store_index].className = "wait-under-5";
המפה משתמשת עכשיו ב-API הקיים של זמני ההמתנה כדי להמחיש למשתמשים את זמני ההמתנה העדכניים:
דרכים חלופיות להתחבר למקורות נתונים בזמן אמת
יש כמה דרכים להתחבר למקורות נתונים בזמן אמת. בהמשך נציג שתי אפשרויות חלופיות, העברת הודעות בענן ב-Firebase ו-Websockets. לא משנה באיזו גישה תבחרו, חשוב להביא בחשבון את הגורמים הבאים כדי שכלי המפות שלכם ימשיך להניב ביצועים טובים:
- תדירות העדכונים
- נפח הנתונים
- מספר הסמנים בתצוגת המפה
- יכולות חומרה ודפדפן
העברת הודעות בענן ב-Firebase
העברת הודעות בענן ב-Firebase היא גישת דחיפה. בשיטה הזו, שולחים עדכונים לאפליקציית המפות בכל פעם שהנתונים על זמני ההמתנה מתעדכנים בקצה העורפי. הודעות עדכון יפעילו פונקציית קריאה חוזרת שמטרתה לעדכן את המראה והתוכן של הסמן.
לפני שבוחרים בארכיטקטורה הזו, יש צורך לשמור על חיבור קבוע לשרת עבור כל דפדפן שמפעיל את אפליקציית המפות. לכן ההרצה של התהליך עשויה להיות יקרה יותר, ובהקשר של בעיות קישוריות, ייתכן שהיא תהיה פחות יציבה.
WebSockets
WebSockets הוא עוד גישה מבוססת דחיפה לשמירה על עדכניות הנתונים. בדומה לתרחיש הקודם, תוכלו להשתמש ב-WebSockets כדי ליצור חיבור קבוע בין הקצה העורפי שלכם לבין אפליקציית המפות. היתרונות הפונקציונליים של גישה זו דומים במהותם להעברת הודעות בענן ב-Firebase, אך ייתכן שתידרש עבודה נוספת כדי להגדיר את התשתית הנחוצה.
סיכום
המפתחים יכולים לשלב מקורות נתונים בזמן אמת עם סמנים מתקדמים כדי לבנות תצוגות חזותיות אינטואיטיביות של מפות Google. יש כמה דרכים לחבר בין מקורות הנתונים האלה, בהתאם לדרישות במפה, לחומרת ולדפדפן של המשתמש ונפח הנתונים. הנתונים המשולבים יכולים לשמש לשליטה במראה ובסגנון של הסמנים המתקדמים בזמן אמת, וכך לאפשר למשתמשים חוויה דינמית.
הפעולות הבאות
קריאה נוספת:
- סמנים מתקדמים – מרכז המפתחים של Google
- יצירת סמנים באמצעות HTML בהתאמה אישית
- Cloud Functions for Firebase
- העברת הודעות בענן ב-Firebase
תורמים
מחברים ראשיים:
ג'ים לפלר | מהנדס פתרונות הפלטפורמה של מפות Google
ג'ון ברניגן | מהנדס לקוחות בכיר ב-Google Cloud Platform
סטיב בארט | מהנדס הפתרונות של הפלטפורמה של מפות Google