טיפים ליצירת חוויית המשתמש הטובה ביותר במהלך ניווט למיקומים עם מכונית

המאמר הזה הוא עדכון של מאמר ישן יותר שמתבסס על גרסאות קודמות של GMP APIs. התוכן הזה עודכן לגרסה החדשה של Places API שהושקה בשנים 2023-2024 ושל Routes API שהושקה בשנת 2023.

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

דיאגרמת מערכת

בהמשך נראה איך אפשר להשתמש ב-Places API החדש וב-Routes API ברצף או בשילוב כדי לזהות את המיקום המתאים לחנייה ליד היעד. המטרה של הפתרון הזה היא להסיר את אי הוודאות ואת הצורך באינטראקציות מרובות כדי למצוא מקום לחנות בו כשמתקרבים ליעד הסופי. כדאי לעיין בשתי דוגמאות שמסבירות איך אפשר להטמיע את המקרים האלה בפירוט.

דוגמה 1 – אטרקציה תיירותית ללא מגרש חניה

בוחרים מיקום שלא מחובר ישירות לשולי הכביש כדי שיהיה צורך לאחזר מסלול בנפרד. יעד הנסיעה הוא נוטרדאם בפריז, ונקודת המוצא היא תחנת הרכבת Gare de l'Est (48.87697775149635, 2.3592247806755564).

Gare l'Est

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

1. בקשה ל-Places API

בדוגמה הזו של בקשה ל-Places API נעשה שימוש בחיפוש טקסט כדי למצוא את קתדרלת נוטרדאם. לקבלת פרטים, אפשר לעיין במסמכי התיעוד למפתחים. ‫‎$APIKEY בדוגמאות האלה הוא מפתח ה-API שיש לכם לממשקי ה-API של Places ו-Routes בפלטפורמה של מפות Google, שהופעלו במסוף Google Cloud. הסבר מפורט יותר זמין במאמר בנושא תחילת העבודה עם הפלטפורמה של מפות Google.

לבקשות החדשות של Places API יש פורמט חדש. השדות בתגובה כבר לא קבועים, ומפתחים צריכים להגדיר fieldmask בכותרת. השימוש ב-fieldmask מוגדר במסמכי התיעוד.

curl -X POST --data @notre_dame.json \
-H 'Content-Type: application/json' -H "X-Goog-Api-Key: $APIKEY" \
-H 'X-Goog-FieldMask: places.id,places.displayName,places.formattedAddress,places.location' \
'https://places.googleapis.com/v1/places:searchText'

עם תוכן של 'notre_date.json' לפרמטרים של חיפוש:

{
   "textQuery": "Notre Dame, Paris",
   "languageCode": "en"
}

בתגובה לבקשה שלמעלה, מתקבלות הקואורדינטות הבאות של קו הרוחב וקו האורך:

{
  "places": [
    {
      "id": "ChIJATr1n-Fx5kcRjQb6q6cdQDY",
      "formattedAddress": "6 Parvis Notre-Dame - Pl. Jean-Paul II, 75004 Paris, France",
      "location": {
        "latitude": 48.852968200000007,
        "longitude": 2.3499021
      },
      "displayName": {
        "text": "Cathédrale Notre-Dame de Paris",
        "languageCode": "en"
      }
    }
  ]
}

כמו שאפשר לראות, הקואורדינטות אכן מצביעות על נוטרדאם.

תמונה של הכניסה לנוטרדאם מפה של אזור נוטרדאם

אם אתם מפתחים או ספקי שירותים, כדאי להציג לנהג באופן אוטומטי את ההודעה "מחפש חנייה ליד נוטרדאם?" או אם לנהג יש רכב חשמלי, כדאי לחפש תחנת טעינה. חוויית המשתמש תהיה שונה בהתאם למכשיר ולמסך, אבל במקרה הזה כדאי לשקול להציג טקסט קצר בתיבת דו-שיח שייעלם אחרי זמן קצר. כדי למצוא חנייה ליד נוטרדאם, מבצעים חיפוש בסביבה באמצעות Places API עם סוגי המקומות parking ו-electric_vehicle_charging_station ברדיוס של 500 מטרים. בדוגמה הבאה, התוצאות יהיו מוטות לטובת אזורי חנייה במרחק של עד 500 מטר מנוטרדאם.

curl -X POST -d '{
  "includedTypes": ["parking", "electric_vehicle_charging_station"],
  "maxResultCount": 10,
  "rankPreference": "DISTANCE",
  "locationRestriction": {
    "circle": {
      "center": {
        "latitude": 48.852968200000007,
        "longitude": 2.3499021},
      "radius": 500.0
    }
  }
}' \
-H 'Content-Type: application/json' -H "X-Goog-Api-Key: $APIKEY" \
-H "X-Goog-FieldMask: places.displayName,places.location" \
https://places.googleapis.com/v1/places:searchNearby

התוצאה הראשונה היא עמדת טעינה במיקום 48.854981, 2.350629, אבל יכול להיות שהתוצאות יהיו שונות כשתריצו את הדוגמה הזו. תשתמשו במיקום הזה בחלק הבא, שבו נבצע בקשה ל-Routes API.

2. בקשת Routes API

כדי למצוא את המסלול מהתחנה לתחנת טעינה שקרובה לקתדרלת נוטרדאם, צריך לשלוח בקשה ל-Routes API. פשוט מגדירים את פרמטרי המוצא והיעד. אפשר למצוא אפשרויות נוספות במסמכי התיעוד למפתחים.

curl -X POST -d '{
  "origin":{
    "location":{
      "latLng":{
        "latitude": 48.87697775149635,
        "longitude": 2.3592247806755564
      }
    }
  },
  "destination":{
    "location":{
      "latLng":{
       "latitude": 48.854981,
        "longitude": 2.350629
      }
    }
  },
  "travelMode": "DRIVE",
  "routingPreference": "TRAFFIC_AWARE",
  "departureTime": "2024-05-16T15:01:23.045123456Z",
  "computeAlternativeRoutes": false,
  "routeModifiers": {
    "avoidTolls": false,
    "avoidHighways": false,
    "avoidFerries": false
  },
  "languageCode": "en-US",
  "units": "METRIC"
}' \
-H 'Content-Type: application/json' -H "X-Goog-Api-Key: $APIKEY" \
-H 'X-Goog-FieldMask: routes.duration,routes.distanceMeters,routes.legs,routes.polyline.encodedPolyline' \
'https://routes.googleapis.com/directions/v2:computeRoutes'

התגובה של Routes API מכילה בדרך כלל כמה הצעות למסלולים. כדי לכלול את נתוני המסלול בתשובה, צריך להגדיר את routes.legs ב-fieldmask. כל מסלול מורכב מכמה 'קטעים', וכל קטע מורכב מכמה 'שלבים' שבהם מוצגים מרחק הנסיעה והקואורדינטות. כדי למצוא את הקואורדינטות הסופיות שאפשר להגיע אליהן ברכב, משתמשים בשדה endLocation של השלב האחרון בקטע האחרון במסלול שבחרתם. ‪"latitude": 48.854937299999996, "longitude": 2.3505841999999997

יכול להיות שהמיקום הזה לא נראה כמו הבחירה הראשונה, אבל אם תסתכלו במפה או בתצוגת רחוב של Google, תראו שהמיקום הזה נמצא במרחק הליכה קצר מאוד, בערך 6-7 דקות, מנוטרדאם.

מסלול אל נוטרדאם

מסלול הליכה ממקום חנייה בתחנת טעינה לקתדרלת נוטרדאם

סיכום לדוגמה 1

כפי שאפשר לראות, כדי למצוא אזור חניה לרכב צריך רק כמה קריאות ל-API ולהציג את ההצעה לנהג. כך המשתמשים שלכם חוסכים זמן כי הם לא צריכים לנסוע ברחובות חד-סטריים או לנסות למצוא מקום להחנות את הרכב באטרקציה תיירותית עמוסה. לסיכום, ביצענו את בקשות ה-API הבאות:

  • בקשה לחיפוש טקסט ב-Places API כדי למצוא את הקואורדינטות של נוטרדאם
  • חיפוש בקרבת מקום באמצעות Places API כדי למצוא אזור חנייה עם תחנת טעינה לרכב חשמלי במרחק של עד 500 מטר מהקואורדינטות האלה
  • בקשה ל-Routes API כדי למצוא מסלול לתחנת הטעינה

דוגמה 2 – הנחיה לטרמינל בשדה תעופה גדול

מפה של נמל התעופה הית'רו

דוגמה נוספת: הנהג מנסה להגיע לאזור גדול שיש בו כמה מיקומים, נקודות עניין או נקודות אפשריות להורדת נוסעים. הנהג יוצא מאצטדיון וומבלי בבריטניה (51.557263604707224, -0.2794575145680608) ומנסה להגיע אל טרמינל 5 בנמל התעופה הית'רו בלונדון.

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

curl -X POST -d '{
  "input": "Heathrow",
  "includedPrimaryTypes": ["airport", "parking"]
}' \
-H 'Content-Type: application/json' -H "X-Goog-Api-Key: $APIKEY" \
https://places.googleapis.com/v1/places:autocomplete

השאילתה שלמעלה מחזירה רשימה של מסופי התשלום ונקודות המסירה הספציפיות במסופים האלה. ברשימת התוצאות אפשר למצוא את 'London Heathrow Airport Terminal 5' ואת מזהה המקום שלו:

"place_id" : "ChIJo21hnPxxdkgRksRL0KQRWII",

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

curl -X POST -d '{
  "origin":{
    "location":{
      "latLng":{
        "latitude": 51.557263604707224,
        "longitude": -0.2794575145680608
      }
    }
  },
  "destination":{
    "placeId": "ChIJo21hnPxxdkgRksRL0KQRWII"
  },
  "travelMode": "DRIVE",
  "routingPreference": "TRAFFIC_AWARE",
  "departureTime": "2024-05-16T15:01:23.045123456Z",
  "computeAlternativeRoutes": false,
  "languageCode": "en-US",
  "units": "METRIC"
}' \
-H 'Content-Type: application/json' -H "X-Goog-Api-Key: $APIKEY" \
-H 'X-Goog-FieldMask: routes.duration,routes.distanceMeters,routes.legs,routes.polyline.encodedPolyline' \
'https://routes.googleapis.com/directions/v2:computeRoutes'

כמו בדוגמה הקודמת, אם תקראו את כל השלבים בתשובת ה-JSON, תמצאו את החלק האחרון של המסלול ואת קואורדינטות הרוחב והאורך של נקודות הסיום (51.4714348, "longitude": -0.48967890000000003).

תמונת Street View של טרמינל 5

סיכום לדוגמה 2

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

  • בקשה להשלמה אוטומטית (חדשה) ב-Places API כדי למצוא את טרמינל 5 בנמל התעופה הית'רו
  • בקשה ל-Routes API כדי לקבל מסלול מוומבלי לטרמינל 5

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

סיכום

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

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

הפעולות הבאות

תחילת העבודה עם GMP : ‏https://developers.google.com/maps/get-started

הצעות לקריאה נוספת

מסמכי ההשלמה האוטומטית של Places API (חדש): https://developers.google.com/maps/documentation/places/web-service/place-autocomplete

מסמכי התיעוד של Routes API:‏ https://developers.google.com/maps/documentation/routes

תורמים

הכותב הראשי: Mikko Toivanen | מהנדס פתרונות בפלטפורמה של מפות Google