הפלטפורמה של מפות Google מאפשרת ללקוחות לשנות את העיצוב החזותי של הסמנים במפה באמצעות סמנים מתקדמים וכך לפתח ממשקים ייחודיים להם. במאמר הזה נסביר איך לקוחות יכולים להתקדם אפילו יותר וליצור סמנים שמשתנים באופן דינמי על סמך נתונים בזמן אמת.
סמנים במפה הם כלי שימושי שמספק למשתמשים חוויות מיפוי עשירות. מאפייני הסמנים, כמו גודל, צבע וצורה, יכולים להעביר מידע נוסף על כל מיקום מסומן. לפעמים המידע הנוסף הזה משתנה באופן דינמי, ולכן המפתח עשוי לרצות שהוויזואליזציה של המפה תתעדכן כדי לספק מידע עדכני ורענן למשתמש.
הנה דוגמה להמחשת התהליך: רשת קמעונאית רוצה להציג למשתמשים במפה את זמני ההמתנה בחנויות. עם זאת, אפשר להשתמש באותה ארכיטקטורה לתרחישי שימוש רבים אחרים. הנה עוד כמה רעיונות:
- זמינות חדרים במלון: במפה שמציגה תוצאות חיפוש של מלונות, זמינות חדרים מעודכנת היא אות חשוב שיכול לעודד משתמשים לבצע הזמנה במלון ככל שהמלאי מצטמצם.
- זמינות מקומות חנייה: במפה של חניונים, המשתמשים יכולים לבחור יעד שיהיה בו מקום חנייה כשהם יגיעו.
- מסעדות פתוחות, מסעדות שעומדות להיסגר ומסעדות סגורות: במפה שמציגה תוצאות חיפוש של מסעדות, חשוב שהמשתמשים ידעו אם המסעדה עלולה להיות סגורה כשיגיעו אליה.
התכונה "סמנים מתקדמים דינמיים"
אתם יכולים ליצור מפה באמצעות סמנים מתקדמים שימחישו נתונים דינמיים. כמו שצוין קודם, התרחיש לדוגמה הוא רשת של חנויות קמעונאיות שמשתמשת במערכת לניהול תורים בקופה כדי להעריך ולהציג את זמני ההמתנה למשתמשים. זו הארכיטקטורה של האפליקציה::
שלב 1 – קביעת מאפיינים להגדרת ממשק הצפייה
השלב הראשון הוא לקבוע מאפיין מיקום אחד או יותר שיוצגו למשתמשים. במקרה הזה, אנחנו רוצים להציג רק מאפיין אחד: זמן ההמתנה הנוכחי בכל מיקום של החנות, שנמדד בדקות.
השלב הבא הוא לבחור מאפיין אחד או יותר של סמנים תואמים כדי להוסיף הערה ויזואלית על זמן ההמתנה לסמן במפה. רשימת מאפייני הסמנים זמינה מחוץ לקופסה במפרט של PinElement. אפשר גם להשתמש ב-HTML בהתאמה אישית כדי לקבל אפשרויות עשירות יותר.
בדוגמה הזו נשתמש בשני מאפייני סמן כדי להציג נתונים של זמני המתנה:
- צבע הסמן: כחול לזמן המתנה של פחות מ-5 דקות, צהוב לזמן המתנה של יותר מ-5 דקות
- תוכן הסמן (נדרשים סמני HTML מותאמים אישית): נכלול את זמן ההמתנה הנוכחי בדקות בסמן עצמו
שלב 2 – הגדרת חיבור למקורות נתונים בזמן אמת
יש כמה דרכים להתחבר למקורות נתונים, והפתרון הנכון תלוי בתרחיש השימוש ובמבנה הטכני שלכם. בדוגמה הזו אנחנו משתמשים בגישת שליפה (pull), שבה אנחנו שולחים בקשות HTTP (REST) באופן קבוע כדי לקבל את נתוני זמן ההמתנה המעודכנים. בסעיפים הבאים מוצגות ארכיטקטורות חלופיות שמבוססות על גישות של דחיפת הודעות.
כדי לאפשר לאפליקציה שלנו לגשת לנתוני זמן ההמתנה מהשרת, הארכיטקטורה שלנו מסתמכת על Cloud Functions for Firebase. הפונקציות של Cloud Functions מאפשרות לנו להגדיר פונקציית בק-אנד כדי לגשת לנתונים האלה ולחשב אותם. אנחנו גם כוללים את ספריית Firebase באפליקציית האינטרנט שלנו, וכך אנחנו יכולים לגשת ל-Cloud Function באמצעות בקשת 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 Developer Center
- יצירת סמנים עם HTML מותאם אישית
- Cloud Functions for Firebase
- העברת הודעות בענן ב-Firebase
שותפים ביצירת התוכן
המחברים העיקריים:
Jim Leflar | Google Maps Platform Solutions Engineer
John Branigan | Google Cloud Platform Sr. Customer Engineer
Steve Barrett | Google Maps Platform Solutions Engineer